@elementor/editor-elements 3.33.0-98 → 3.35.0-324

package/dist/index.mjs

@@ -1,5 +1,5 @@
-// src/hooks/use-element-setting.ts
-import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+// src/hooks/use-element-children.ts
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync/get-container.ts
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
@@ -16,6 +16,53 @@ var selectElement = (elementId) => {
   }
 };
 
+// src/hooks/use-element-children.ts
+function useElementChildren(elementId, childrenTypes) {
+  return useListenTo(
+    [
+      v1ReadyEvent(),
+      commandEndEvent("document/elements/create"),
+      commandEndEvent("document/elements/delete"),
+      commandEndEvent("document/elements/update"),
+      commandEndEvent("document/elements/set-settings")
+    ],
+    () => {
+      const container = getContainer(elementId);
+      const elementChildren = Object.entries(childrenTypes).reduce((acc, [parentType, childType]) => {
+        const parent = container?.children?.findRecursive?.(
+          ({ model }) => model.get("elType") === parentType
+        );
+        const children = parent?.children ?? [];
+        acc[childType] = children.filter(({ model }) => model.get("elType") === childType).map(({ id }) => ({ id }));
+        return acc;
+      }, {});
+      return elementChildren;
+    },
+    [elementId]
+  );
+}
+
+// src/hooks/use-element-editor-settings.ts
+import { __privateUseListenTo as useListenTo2, windowEvent } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-element-editor-settings.ts
+function getElementEditorSettings(elementId) {
+  const container = getContainer(elementId);
+  return container?.model.get("editor_settings") ?? {};
+}
+
+// src/hooks/use-element-editor-settings.ts
+var useElementEditorSettings = (elementId) => {
+  return useListenTo2(
+    windowEvent("elementor/element/update_editor_settings"),
+    () => getElementEditorSettings(elementId),
+    [elementId]
+  );
+};
+
+// src/hooks/use-element-setting.ts
+import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
+
 // src/sync/get-element-setting.ts
 var getElementSetting = (elementId, settingKey) => {
   const container = getContainer(elementId);
@@ -27,15 +74,15 @@ var getElementSettings = (elementId, settingKey) => {
 
 // src/hooks/use-element-setting.ts
 var useElementSetting = (elementId, settingKey) => {
-  return useListenTo(
-    commandEndEvent("document/elements/set-settings"),
+  return useListenTo3(
+    commandEndEvent2("document/elements/set-settings"),
     () => getElementSetting(elementId, settingKey),
     [elementId, settingKey]
   );
 };
 var useElementSettings = (elementId, settingKeys) => {
-  return useListenTo(
-    commandEndEvent("document/elements/set-settings"),
+  return useListenTo3(
+    commandEndEvent2("document/elements/set-settings"),
     () => settingKeys.reduce((settings, key) => {
       const value = getElementSetting(elementId, key);
       if (value !== null) {
@@ -43,49 +90,61 @@ var useElementSettings = (elementId, settingKeys) => {
       }
       return settings;
     }, {}),
-    [elementId, ...settingKeys]
+    [elementId, settingKeys.join(",")]
   );
 };
 
-// src/hooks/use-element-type.ts
-import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2 } from "@elementor/editor-v1-adapters";
-
-// src/sync/get-widgets-cache.ts
-function getWidgetsCache() {
-  const extendedWindow = window;
-  return extendedWindow?.elementor?.widgetsCache || null;
-}
-
-// src/hooks/use-element-type.ts
-function useElementType(type) {
-  return useListenTo2(
-    commandEndEvent2("editor/documents/load"),
+// src/hooks/use-parent-element.ts
+import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+function useParentElement(elementId) {
+  return useListenTo4(
+    [commandEndEvent3("document/elements/create")],
     () => {
-      if (!type) {
-        return null;
-      }
-      const widgetsCache = getWidgetsCache();
-      const elementType = widgetsCache?.[type];
-      if (!elementType?.atomic_controls) {
+      if (!elementId) {
         return null;
       }
-      if (!elementType?.atomic_props_schema) {
+      const extendedWindow = window;
+      const element = extendedWindow?.elementor?.getContainer?.(elementId);
+      if (!element) {
         return null;
       }
-      return {
-        key: type,
-        controls: elementType.atomic_controls,
-        propsSchema: elementType.atomic_props_schema,
-        dependenciesPerTargetMapping: elementType.dependencies_per_target_mapping ?? {},
-        title: elementType.title
-      };
+      return element.parent;
     },
-    [type]
+    [elementId]
   );
 }
 
 // src/hooks/use-selected-element.ts
-import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent3 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo5, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-widgets-cache.ts
+function getWidgetsCache() {
+  const extendedWindow = window;
+  return extendedWindow?.elementor?.widgetsCache || null;
+}
+
+// src/sync/get-element-type.ts
+function getElementType(type) {
+  if (!type) {
+    return null;
+  }
+  const widgetsCache = getWidgetsCache();
+  const elementType = widgetsCache?.[type];
+  if (!elementType?.atomic_controls) {
+    return null;
+  }
+  if (!elementType?.atomic_props_schema) {
+    return null;
+  }
+  return {
+    key: type,
+    controls: elementType.atomic_controls,
+    propsSchema: elementType.atomic_props_schema,
+    dependenciesPerTargetMapping: elementType.dependencies_per_target_mapping ?? {},
+    title: elementType.title,
+    styleStates: elementType.atomic_style_states ?? []
+  };
+}
 
 // src/sync/get-selected-elements.ts
 function getSelectedElements() {
@@ -105,72 +164,23 @@ function getSelectedElements() {
 
 // src/hooks/use-selected-element.ts
 function useSelectedElement() {
-  const elements = useListenTo3(
+  const elements = useListenTo5(
     [
-      commandEndEvent3("document/elements/select"),
-      commandEndEvent3("document/elements/deselect"),
-      commandEndEvent3("document/elements/select-all"),
-      commandEndEvent3("document/elements/deselect-all")
+      commandEndEvent4("document/elements/select"),
+      commandEndEvent4("document/elements/deselect"),
+      commandEndEvent4("document/elements/select-all"),
+      commandEndEvent4("document/elements/deselect-all")
     ],
     getSelectedElements
   );
   const [element] = elements;
-  const elementType = useElementType(element?.type);
+  const elementType = getElementType(element?.type);
   if (elements.length !== 1 || !elementType) {
     return { element: null, elementType: null };
   }
   return { element, elementType };
 }
 
-// src/hooks/use-parent-element.ts
-import { __privateUseListenTo as useListenTo4, commandEndEvent as commandEndEvent4 } from "@elementor/editor-v1-adapters";
-function useParentElement(elementId) {
-  return useListenTo4(
-    [commandEndEvent4("document/elements/create")],
-    () => {
-      if (!elementId) {
-        return null;
-      }
-      const extendedWindow = window;
-      const element = extendedWindow?.elementor?.getContainer?.(elementId);
-      if (!element) {
-        return null;
-      }
-      return element.parent;
-    },
-    [elementId]
-  );
-}
-
-// src/hooks/use-element-children.ts
-import { __privateUseListenTo as useListenTo5, commandEndEvent as commandEndEvent5, v1ReadyEvent } from "@elementor/editor-v1-adapters";
-function useElementChildren(elementId, childrenTypes) {
-  return useListenTo5(
-    [
-      v1ReadyEvent(),
-      commandEndEvent5("document/elements/create"),
-      commandEndEvent5("document/elements/delete"),
-      commandEndEvent5("document/elements/update"),
-      commandEndEvent5("document/elements/set-settings")
-    ],
-    () => {
-      const container = getContainer(elementId);
-      const elementChildren = childrenTypes.reduce((acc, type) => {
-        acc[type] = [];
-        return acc;
-      }, {});
-      container?.children?.forEachRecursive?.(({ model, id }) => {
-        const elType = model.get("elType");
-        if (elType && elType in elementChildren) {
-          elementChildren[elType].push({ id });
-        }
-      });
-      return elementChildren;
-    },
-    [elementId]
-  );
-}
-
 // src/sync/create-element.ts
 import { __privateRunCommandSync as runCommandSync } from "@elementor/editor-v1-adapters";
 function createElement({ containerId, model, options }) {
@@ -185,41 +195,21 @@ function createElement({ containerId, model, options }) {
   });
 }
 
-// src/sync/duplicate-element.ts
-function duplicateElement({ elementId, options = {} }) {
-  const elementToDuplicate = getContainer(elementId);
-  if (!elementToDuplicate) {
-    throw new Error(`Element with ID "${elementId}" not found`);
-  }
-  if (!elementToDuplicate.parent) {
-    throw new Error(`Element with ID "${elementId}" has no parent container`);
-  }
-  const parentContainer = elementToDuplicate.parent;
-  const elementModel = elementToDuplicate.model.toJSON();
-  const currentIndex = elementToDuplicate.view?._index ?? 0;
-  const insertPosition = options.clone !== false ? currentIndex + 1 : void 0;
-  return createElement({
-    containerId: parentContainer.id,
-    model: elementModel,
-    options: {
-      at: insertPosition,
-      ...options
-    }
-  });
-}
-
 // src/sync/create-elements.ts
 import { undoable } from "@elementor/editor-v1-adapters";
 import { __ } from "@wordpress/i18n";
 
 // src/sync/delete-element.ts
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
-function deleteElement({ elementId, options = {} }) {
+function deleteElement({
+  elementId,
+  options = {}
+}) {
   const container = getContainer(elementId);
   if (!container) {
     throw new Error(`Element with ID "${elementId}" not found`);
   }
-  runCommand2("document/elements/delete", {
+  return runCommand2("document/elements/delete", {
     container,
     options
   });
@@ -289,14 +279,50 @@ var createElements = ({
   return undoableCreate({ elements });
 };
 
+// src/sync/drop-element.ts
+import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
+function dropElement({ containerId, model, options }) {
+  const container = getContainer(containerId);
+  if (!container) {
+    throw new Error(`Container with ID "${containerId}" not found`);
+  }
+  return runCommandSync2("preview/drop", {
+    container,
+    model,
+    options
+  });
+}
+
+// src/sync/duplicate-element.ts
+function duplicateElement({ elementId, options = {} }) {
+  const elementToDuplicate = getContainer(elementId);
+  if (!elementToDuplicate) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  if (!elementToDuplicate.parent) {
+    throw new Error(`Element with ID "${elementId}" has no parent container`);
+  }
+  const parentContainer = elementToDuplicate.parent;
+  const elementModel = elementToDuplicate.model.toJSON();
+  const currentIndex = elementToDuplicate.view?._index ?? 0;
+  const insertPosition = options.clone !== false ? currentIndex + 1 : void 0;
+  return createElement({
+    containerId: parentContainer.id,
+    model: elementModel,
+    options: {
+      at: insertPosition,
+      ...options
+    }
+  });
+}
+
 // src/sync/duplicate-elements.ts
 import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
 import { __ as __2 } from "@wordpress/i18n";
 var duplicateElements = ({
   elementIds,
   title,
-  subtitle = __2("Item duplicated", "elementor"),
-  onCreate
+  subtitle = __2("Item duplicated", "elementor")
 }) => {
   const undoableDuplicate = undoable2(
     {
@@ -319,7 +345,7 @@ var duplicateElements = ({
           }
           return acc;
         }, []);
-        return { duplicatedElements: onCreate?.(duplicatedElements) ?? duplicatedElements };
+        return { duplicatedElements };
       },
       undo: (_, { duplicatedElements }) => {
         [...duplicatedElements].reverse().forEach(({ id }) => {
@@ -352,7 +378,7 @@ var duplicateElements = ({
           }
           return acc;
         }, []);
-        return { duplicatedElements: onCreate?.(duplicatedElements) ?? duplicatedElements };
+        return { duplicatedElements };
       }
     },
     {
@@ -363,74 +389,23 @@ var duplicateElements = ({
   return undoableDuplicate({ elementIds });
 };
 
-// src/sync/remove-elements.ts
-import { undoable as undoable3 } from "@elementor/editor-v1-adapters";
-import { __ as __3 } from "@wordpress/i18n";
-var removeElements = ({
-  elementIds,
-  title,
-  subtitle = __3("Item removed", "elementor")
-}) => {
-  const undoableRemove = undoable3(
-    {
-      do: ({ elementIds: elementIdsParam }) => {
-        const removedElements = [];
-        elementIdsParam.forEach((elementId) => {
-          const container = getContainer(elementId);
-          if (container) {
-            const model = container.model.toJSON();
-            const parent = container.parent;
-            const at = container.view?._index ?? 0;
-            removedElements.push({
-              elementId,
-              model,
-              parent: parent ?? null,
-              at
-            });
-          }
-        });
-        elementIdsParam.forEach((elementId) => {
-          deleteElement({
-            elementId,
-            options: { useHistory: false }
-          });
-        });
-        return { elementIds: elementIdsParam, removedElements };
-      },
-      undo: (_, { removedElements }) => {
-        [...removedElements].reverse().forEach(({ model, parent, at }) => {
-          if (parent && model) {
-            createElement({
-              containerId: parent.id,
-              model,
-              options: { useHistory: false, at }
-            });
-          }
-        });
-      },
-      redo: (_, { elementIds: originalElementIds, removedElements }) => {
-        originalElementIds.forEach((elementId) => {
-          deleteElement({
-            elementId,
-            options: { useHistory: false }
-          });
-        });
-        return { elementIds: originalElementIds, removedElements };
-      }
-    },
-    {
-      title,
-      subtitle
-    }
-  );
-  return undoableRemove({ elementIds });
+// src/sync/generate-element-id.ts
+var generateElementId = () => {
+  const extendedWindow = window;
+  return extendedWindow.elementorCommon?.helpers?.getUniqueId?.() ?? `el-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 };
 
-// src/sync/get-element-styles.ts
-var getElementStyles = (elementID) => {
-  const container = getContainer(elementID);
-  return container?.model.get("styles") || null;
-};
+// src/sync/get-current-document-container.ts
+function getCurrentDocumentContainer() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;
+}
+
+// src/sync/get-current-document-id.ts
+function getCurrentDocumentId() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.documents?.getCurrentId?.() ?? null;
+}
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -450,9 +425,20 @@ var ElementLabelNotExistsError = createError({
   code: "element_label_not_exists",
   message: "Element label does not exist."
 });
+var ElementParentNotFoundError = createError({
+  code: "element_parent_not_found",
+  message: "Element parent not found."
+});
+var ElementIndexNotFoundError = createError({
+  code: "element_index_not_found",
+  message: "Element index not found."
+});
 
 // src/sync/get-element-label.ts
 function getElementLabel(elementId) {
+  if (!elementId) {
+    elementId = getSelectedElements()?.[0]?.id;
+  }
   const container = getContainer(elementId);
   const type = container?.model.get("widgetType") || container?.model.get("elType");
   if (!type) {
@@ -465,11 +451,11 @@ function getElementLabel(elementId) {
   return label;
 }
 
-// src/sync/get-current-document-container.ts
-function getCurrentDocumentContainer() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.documents?.getCurrent?.()?.container ?? null;
-}
+// src/sync/get-element-styles.ts
+var getElementStyles = (elementID) => {
+  const container = getContainer(elementID);
+  return container?.model.get("styles") || null;
+};
 
 // src/sync/get-elements.ts
 function getElements(root) {
@@ -483,14 +469,239 @@ function getElements(root) {
   return [container, ...children];
 }
 
-// src/sync/get-current-document-id.ts
-function getCurrentDocumentId() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.documents?.getCurrentId?.() ?? null;
+// src/sync/move-element.ts
+function moveElement({ elementId, targetContainerId, options = {} }) {
+  const container = getContainer(elementId);
+  const target = getContainer(targetContainerId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  if (!target) {
+    throw new Error(`Target container with ID "${targetContainerId}" not found`);
+  }
+  const modelToRecreate = container.model.toJSON();
+  deleteElement({
+    elementId,
+    // prevent inner history from being created
+    options: { ...options, useHistory: false }
+  });
+  const newContainer = createElement({
+    containerId: targetContainerId,
+    model: modelToRecreate,
+    // prevent inner history from being created
+    options: { edit: false, ...options, useHistory: false }
+  });
+  return newContainer;
+}
+
+// src/sync/move-elements.ts
+import { undoable as undoable3 } from "@elementor/editor-v1-adapters";
+import { __ as __3 } from "@wordpress/i18n";
+var moveElements = ({
+  moves: movesToMake,
+  title,
+  subtitle = __3("Elements moved", "elementor"),
+  onMoveElements,
+  onRestoreElements
+}) => {
+  const undoableMove = undoable3(
+    {
+      do: ({ moves }) => {
+        const movedElements = [];
+        onMoveElements?.();
+        moves.forEach((move) => {
+          const { elementId } = move;
+          const sourceContainer = getContainer(elementId);
+          if (!sourceContainer) {
+            throw new Error(`Element with ID "${elementId}" not found`);
+          }
+          const originalContainerId = sourceContainer.parent?.id || "";
+          const originalIndex = sourceContainer.parent?.children?.indexOf(sourceContainer) ?? -1;
+          const originalPosition = {
+            elementId,
+            originalContainerId,
+            originalIndex
+          };
+          const element = moveElement({
+            ...move,
+            options: { ...move.options, useHistory: false }
+          });
+          movedElements.push({
+            elementId,
+            originalPosition,
+            move,
+            element
+          });
+        });
+        return { movedElements };
+      },
+      undo: (_, { movedElements }) => {
+        onRestoreElements?.();
+        [...movedElements].reverse().forEach(({ originalPosition }) => {
+          const { elementId, originalContainerId, originalIndex } = originalPosition;
+          moveElement({
+            elementId,
+            targetContainerId: originalContainerId,
+            options: {
+              useHistory: false,
+              at: originalIndex >= 0 ? originalIndex : void 0
+            }
+          });
+        });
+      },
+      redo: (_, { movedElements }) => {
+        const newMovedElements = [];
+        onMoveElements?.();
+        movedElements.forEach(({ move, originalPosition }) => {
+          const element = moveElement({
+            ...move,
+            options: { ...move.options, useHistory: false }
+          });
+          newMovedElements.push({
+            elementId: move.elementId,
+            originalPosition,
+            move,
+            element
+          });
+        });
+        return { movedElements: newMovedElements };
+      }
+    },
+    {
+      title,
+      subtitle
+    }
+  );
+  return undoableMove({ moves: movesToMake });
+};
+
+// src/sync/remove-elements.ts
+import { undoable as undoable4 } from "@elementor/editor-v1-adapters";
+import { __ as __4 } from "@wordpress/i18n";
+var removeElements = ({
+  elementIds,
+  title,
+  subtitle = __4("Item removed", "elementor"),
+  onRemoveElements,
+  onRestoreElements
+}) => {
+  const undoableRemove = undoable4(
+    {
+      do: ({ elementIds: elementIdsParam }) => {
+        const removedElements = [];
+        elementIdsParam.forEach((elementId) => {
+          const container = getContainer(elementId);
+          if (container) {
+            const model = container.model.toJSON();
+            const parent = container.parent;
+            const at = container.view?._index ?? 0;
+            removedElements.push({
+              elementId,
+              model,
+              parent: parent ?? null,
+              at
+            });
+          }
+        });
+        onRemoveElements?.();
+        elementIdsParam.forEach((elementId) => {
+          deleteElement({
+            elementId,
+            options: { useHistory: false }
+          });
+        });
+        return { elementIds: elementIdsParam, removedElements };
+      },
+      undo: (_, { removedElements }) => {
+        onRestoreElements?.();
+        [...removedElements].reverse().forEach(({ model, parent, at }) => {
+          if (parent && model) {
+            createElement({
+              containerId: parent.id,
+              model,
+              options: { useHistory: false, at }
+            });
+          }
+        });
+      },
+      redo: (_, { elementIds: originalElementIds, removedElements }) => {
+        onRemoveElements?.();
+        originalElementIds.forEach((elementId) => {
+          deleteElement({
+            elementId,
+            options: { useHistory: false }
+          });
+        });
+        return { elementIds: originalElementIds, removedElements };
+      }
+    },
+    {
+      title,
+      subtitle
+    }
+  );
+  return undoableRemove({ elementIds });
+};
+
+// src/sync/replace-element.ts
+var replaceElement = ({ currentElement, newElement, withHistory = true }) => {
+  const { containerId, index } = getNewElementLocation(currentElement, newElement);
+  createElement({
+    containerId,
+    model: newElement,
+    options: { at: index, useHistory: withHistory }
+  });
+  deleteElement({ elementId: currentElement.id, options: { useHistory: withHistory } });
+};
+function getNewElementLocation(currentElement, newElement) {
+  let location;
+  const currentElementContainer = getContainer(currentElement.id);
+  if (!currentElementContainer) {
+    throw new ElementNotFoundError({ context: { elementId: currentElement.id } });
+  }
+  const parent = currentElementContainer.parent;
+  if (!parent) {
+    throw new ElementParentNotFoundError({ context: { elementId: currentElement.id } });
+  }
+  const elementIndex = currentElementContainer.view?._index ?? 0;
+  if (elementIndex === void 0 || elementIndex === -1) {
+    throw new ElementIndexNotFoundError({ context: { elementId: currentElement.id } });
+  }
+  location = { containerId: parent.id, index: elementIndex };
+  if (parent.id === "document" && newElement.elType === "widget") {
+    location = createWrapperForWidget(parent.id, elementIndex);
+  }
+  return location;
+}
+function createWrapperForWidget(parentId, elementIndex) {
+  const container = createElement({
+    containerId: parentId,
+    model: { elType: "container" },
+    options: { at: elementIndex, useHistory: false }
+  });
+  return { containerId: container.id, index: 0 };
+}
+
+// src/sync/update-element-editor-settings.ts
+import { __privateRunCommandSync as runCommandSync3 } from "@elementor/editor-v1-adapters";
+var updateElementEditorSettings = ({
+  elementId,
+  settings
+}) => {
+  const element = getContainer(elementId);
+  if (!element) {
+    throw new Error(`Element with id ${elementId} not found`);
+  }
+  const editorSettings = element.model.get("editor_settings") ?? {};
+  element.model.set("editor_settings", { ...editorSettings, ...settings });
+  setDocumentModifiedStatus(true);
+};
+function setDocumentModifiedStatus(status) {
+  runCommandSync3("document/save/set-is-modified", { status }, { internal: true });
 }
 
 // src/sync/update-element-settings.ts
-import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
+import { __privateRunCommandSync as runCommandSync4 } from "@elementor/editor-v1-adapters";
 var updateElementSettings = ({ id, props, withHistory = true }) => {
   const container = getContainer(id);
   const args = {
@@ -498,45 +709,105 @@ var updateElementSettings = ({ id, props, withHistory = true }) => {
     settings: { ...props }
   };
   if (withHistory) {
-    runCommandSync2("document/elements/settings", args);
+    runCommandSync4("document/elements/settings", args);
   } else {
-    runCommandSync2("document/elements/set-settings", args, { internal: true });
+    runCommandSync4("document/elements/set-settings", args, { internal: true });
   }
 };
 
-// src/sync/generate-element-id.ts
-var generateElementId = () => {
-  const extendedWindow = window;
-  return extendedWindow.elementorCommon?.helpers?.getUniqueId?.() ?? `el-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-};
-
-// src/sync/replace-element.ts
-var replaceElement = ({ currentElement, newElement, withHistory = true }) => {
-  const parent = getContainer(currentElement.id)?.parent;
-  if (!parent) {
-    throw new Error(`Parent not found for element ${currentElement.id}. Cannot replace element.`);
+// src/link-restriction.ts
+function getLinkInLinkRestriction(elementId) {
+  const anchoredDescendantId = getAnchoredDescendantId(elementId);
+  if (anchoredDescendantId) {
+    return {
+      shouldRestrict: true,
+      reason: "descendant",
+      elementId: anchoredDescendantId
+    };
   }
-  const elementIndex = parent.children?.findIndex((child) => child.id === currentElement.id);
-  if (elementIndex === void 0 || elementIndex === -1) {
-    throw new Error(`Element ${currentElement.id} not found in parent container. Cannot replace element.`);
+  const ancestor = getAnchoredAncestorId(elementId);
+  if (ancestor) {
+    return {
+      shouldRestrict: true,
+      reason: "ancestor",
+      elementId: ancestor
+    };
   }
-  createElement({
-    containerId: parent.id,
-    model: newElement,
-    options: { at: elementIndex, useHistory: withHistory }
-  });
-  deleteElement({ elementId: currentElement.id, options: { useHistory: withHistory } });
-};
+  return {
+    shouldRestrict: false
+  };
+}
+function getAnchoredDescendantId(elementId) {
+  const element = getElementDOM(elementId);
+  if (!element) {
+    return null;
+  }
+  for (const childAnchorElement of Array.from(element.querySelectorAll("a"))) {
+    const childElementId = findElementIdOf(childAnchorElement);
+    if (childElementId !== elementId) {
+      return childElementId;
+    }
+  }
+  return null;
+}
+function getAnchoredAncestorId(elementId) {
+  const element = getElementDOM(elementId);
+  if (!element || element.parentElement === null) {
+    return null;
+  }
+  const parentAnchor = element.parentElement.closest("a");
+  return parentAnchor ? findElementIdOf(parentAnchor) : null;
+}
+function isElementAnchored(elementId) {
+  const element = getElementDOM(elementId);
+  if (!element) {
+    return false;
+  }
+  if (isAnchorTag(element.tagName)) {
+    return true;
+  }
+  return doesElementContainAnchor(element);
+}
+function doesElementContainAnchor(element) {
+  for (const child of element.children) {
+    if (isElementorElement(child)) {
+      continue;
+    }
+    if (isAnchorTag(child.tagName)) {
+      return true;
+    }
+    if (doesElementContainAnchor(child)) {
+      return true;
+    }
+  }
+  return false;
+}
+function findElementIdOf(element) {
+  return element.closest("[data-id]")?.dataset.id || null;
+}
+function getElementDOM(id) {
+  try {
+    return getContainer(id)?.view?.el || null;
+  } catch {
+    return null;
+  }
+}
+function isAnchorTag(tagName) {
+  return tagName.toLowerCase() === "a";
+}
+function isElementorElement(element) {
+  return element.hasAttribute("data-id");
+}
 
 // src/styles/consts.ts
-import { commandEndEvent as commandEndEvent6, windowEvent } from "@elementor/editor-v1-adapters";
+import { commandEndEvent as commandEndEvent5, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
 var ELEMENT_STYLE_CHANGE_EVENT = "elementor/editor-v2/editor-elements/style";
 var styleRerenderEvents = [
-  commandEndEvent6("document/elements/create"),
-  commandEndEvent6("document/elements/duplicate"),
-  commandEndEvent6("document/elements/import"),
-  commandEndEvent6("document/elements/paste"),
-  windowEvent(ELEMENT_STYLE_CHANGE_EVENT)
+  commandEndEvent5("document/elements/create"),
+  commandEndEvent5("document/elements/duplicate"),
+  commandEndEvent5("document/elements/import"),
+  commandEndEvent5("document/elements/paste"),
+  windowEvent2(ELEMENT_STYLE_CHANGE_EVENT)
 ];
 
 // src/styles/create-element-style.ts
@@ -547,7 +818,7 @@ import {
 
 // src/styles/mutate-element-styles.ts
 import { classesPropTypeUtil } from "@elementor/editor-props";
-import { __privateRunCommandSync as runCommandSync3 } from "@elementor/editor-v1-adapters";
+import { __privateRunCommandSync as runCommandSync5 } from "@elementor/editor-v1-adapters";
 function mutateElementStyles(elementId, mutator) {
   const container = getContainer(elementId);
   if (!container) {
@@ -603,7 +874,7 @@ function getClassesProps(container) {
 }
 function notifyChanges() {
   dispatchChangeEvent();
-  runCommandSync3("document/save/set-is-modified", { status: true }, { internal: true });
+  runCommandSync5("document/save/set-is-modified", { status: true }, { internal: true });
 }
 function dispatchChangeEvent() {
   window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT));
@@ -655,6 +926,14 @@ function shouldCreateNewLocalStyle(payload) {
   return !payload?.styleId && !payload?.provider;
 }
 
+// src/styles/delete-element-style.ts
+function deleteElementStyle(elementId, styleId) {
+  mutateElementStyles(elementId, (styles) => {
+    delete styles[styleId];
+    return styles;
+  });
+}
+
 // src/styles/update-element-style.ts
 import { mergeProps } from "@elementor/editor-props";
 import { getVariantByMeta } from "@elementor/editor-styles";
@@ -676,96 +955,663 @@ function updateElementStyle(args) {
   });
 }
 
-// src/styles/delete-element-style.ts
-function deleteElementStyle(elementId, styleId) {
-  mutateElementStyles(elementId, (styles) => {
-    delete styles[styleId];
-    return styles;
+// src/hooks/use-element-interactions.ts
+import { useState } from "react";
+import { __privateUseListenTo as useListenTo6, windowEvent as windowEvent3 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-element-interactions.ts
+function getElementInteractions(elementId) {
+  const container = getContainer(elementId);
+  const interactions = container?.model?.get("interactions");
+  if (typeof interactions === "string") {
+    return JSON.parse(interactions);
+  }
+  return interactions;
+}
+
+// src/hooks/use-element-interactions.ts
+var useElementInteractions = (elementId) => {
+  const [interactions, setInteractions] = useState(() => {
+    const initial = getElementInteractions(elementId);
+    return initial ?? { version: 1, items: [] };
   });
+  useListenTo6(
+    windowEvent3("elementor/element/update_interactions"),
+    () => {
+      const newInteractions = getElementInteractions(elementId);
+      setInteractions(newInteractions ?? { version: 1, items: [] });
+    },
+    [elementId]
+  );
+  return interactions;
+};
+
+// src/sync/update-element-interactions.ts
+import { __privateRunCommandSync as runCommandSync6 } from "@elementor/editor-v1-adapters";
+var updateElementInteractions = ({
+  elementId,
+  interactions
+}) => {
+  const element = getContainer(elementId);
+  if (!element) {
+    throw new Error(`Element with id ${elementId} not found`);
+  }
+  element.model.set("interactions", interactions);
+  window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
+  setDocumentModifiedStatus2(true);
+};
+var playElementInteractions = (elementId, animationId) => {
+  window.top?.dispatchEvent(new CustomEvent("atomic/play_interactions", { detail: { elementId, animationId } }));
+};
+function setDocumentModifiedStatus2(status) {
+  runCommandSync6("document/save/set-is-modified", { status }, { internal: true });
 }
 
-// src/link-restriction.ts
-function getLinkInLinkRestriction(elementId) {
-  const anchoredDescendantId = getAnchoredDescendantId(elementId);
-  if (anchoredDescendantId) {
-    return {
-      shouldRestrict: true,
-      reason: "descendant",
-      elementId: anchoredDescendantId
-    };
+// src/mcp/index.ts
+import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
+
+// src/mcp/elements-tool.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
+import { z } from "@elementor/schema";
+
+// src/mcp/handlers/create-element.ts
+function handleCreateElement({
+  elementType,
+  containerId,
+  props = {},
+  styles
+}) {
+  let container = containerId === "document" ? getCurrentDocumentContainer() : getContainer(containerId);
+  if (!container) {
+    if (containerId === "document") {
+      throw new Error("Document container not found. Please ensure the editor is initialized.");
+    }
+    throw new Error(`Container with ID "${containerId}" not found`);
   }
-  const ancestor = getAnchoredAncestorId(elementId);
-  if (ancestor) {
-    return {
-      shouldRestrict: true,
-      reason: "ancestor",
-      elementId: ancestor
+  const containerElType = container.model.get("elType");
+  const isDocument = container.id === "document" || containerElType === "document";
+  if (isDocument) {
+    const containerModel = {
+      elType: "e-div-block"
     };
+    const createdContainer = createElement({
+      containerId: container.id,
+      model: containerModel,
+      options: { useHistory: true }
+    });
+    createElementStyle({
+      elementId: createdContainer.id,
+      classesProp: "classes",
+      label: "local",
+      meta: { breakpoint: "desktop", state: null },
+      props: {
+        display: { $$type: "string", value: "flex" },
+        "flex-direction": { $$type: "string", value: "row" },
+        "flex-wrap": { $$type: "string", value: "wrap" }
+      }
+    });
+    container = getContainer(createdContainer.id);
+    if (!container) {
+      throw new Error("Failed to create container for widget. Cannot create widgets directly in the document.");
+    }
+  }
+  const actualContainerId = container.id;
+  const elementTypeData = getElementType(elementType);
+  if (!elementTypeData) {
+    throw new Error(`Element type "${elementType}" not found or is not atomic`);
+  }
+  const model = {
+    widgetType: elementType,
+    elType: "widget",
+    settings: props
+  };
+  const createdElement = createElement({
+    containerId: actualContainerId,
+    model,
+    options: { useHistory: true }
+  });
+  if (styles) {
+    createElementStyle({
+      elementId: createdElement.id,
+      classesProp: "classes",
+      label: "local",
+      meta: { breakpoint: "desktop", state: null },
+      props: styles
+    });
   }
   return {
-    shouldRestrict: false
+    elementId: createdElement.id,
+    type: elementType
   };
 }
-function getAnchoredDescendantId(elementId) {
-  const element = getElementDOM(elementId);
-  if (!element) {
+
+// src/mcp/handlers/common-style-utils.ts
+var VALID_BREAKPOINTS = [
+  "widescreen",
+  "desktop",
+  "laptop",
+  "tablet_extra",
+  "tablet",
+  "mobile_extra",
+  "mobile"
+];
+function resolveBreakpointId(breakpoint) {
+  if (breakpoint === null) {
     return null;
   }
-  for (const childAnchorElement of Array.from(element.querySelectorAll("a"))) {
-    const childElementId = findElementIdOf(childAnchorElement);
-    if (childElementId !== elementId) {
-      return childElementId;
-    }
+  if (VALID_BREAKPOINTS.includes(breakpoint)) {
+    return breakpoint;
   }
-  return null;
+  return "desktop";
 }
-function getAnchoredAncestorId(elementId) {
-  const element = getElementDOM(elementId);
-  if (!element || element.parentElement === null) {
-    return null;
+
+// src/mcp/handlers/create-style.ts
+function handleCreateStyle({
+  elementId,
+  styleId,
+  classesProp = "classes",
+  label = "local",
+  styles,
+  breakpoint = "desktop",
+  state = null,
+  customCss = null
+}) {
+  const resolvedBreakpoint = resolveBreakpointId(breakpoint);
+  const resolvedState = state === null || state === void 0 ? null : state;
+  const createdStyleId = createElementStyle({
+    styleId,
+    elementId,
+    classesProp,
+    label,
+    meta: { breakpoint: resolvedBreakpoint, state: resolvedState },
+    props: styles,
+    custom_css: customCss
+  });
+  return { styleId: createdStyleId };
+}
+
+// src/mcp/handlers/delete-element.ts
+function handleDeleteElement(elementId) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
   }
-  const parentAnchor = element.parentElement.closest("a");
-  return parentAnchor ? findElementIdOf(parentAnchor) : null;
+  deleteElement({
+    elementId,
+    options: { useHistory: true }
+  });
+  return { success: true };
 }
-function isElementAnchored(elementId) {
-  const element = getElementDOM(elementId);
-  if (!element) {
-    return false;
+
+// src/mcp/handlers/delete-style.ts
+function handleDeleteStyle({ elementId, styleId }) {
+  const elementStyles = getElementStyles(elementId);
+  if (!elementStyles) {
+    throw new Error(`Element with ID "${elementId}" has no styles.`);
   }
-  if (isAnchorTag(element.tagName)) {
-    return true;
+  const resolvedStyleId = styleId || Object.keys(elementStyles)[0];
+  if (!resolvedStyleId) {
+    throw new Error(`Element with ID "${elementId}" has no styles to delete.`);
   }
-  return doesElementContainAnchor(element);
+  deleteElementStyle(elementId, resolvedStyleId);
+  return { success: true };
 }
-function doesElementContainAnchor(element) {
-  for (const child of element.children) {
-    if (isElementorElement(child)) {
-      continue;
-    }
-    if (isAnchorTag(child.tagName)) {
-      return true;
+
+// src/mcp/handlers/deselect-element.ts
+import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
+function handleDeselectElement(elementId) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  runCommand3("document/elements/deselect", { container });
+  return { success: true };
+}
+function handleDeselectAllElements() {
+  runCommand3("document/elements/deselect-all", {});
+  return { success: true };
+}
+
+// src/mcp/handlers/duplicate-element.ts
+function handleDuplicateElement(elementId) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  const duplicatedElement = duplicateElement({
+    elementId,
+    options: { useHistory: true }
+  });
+  const type = duplicatedElement.model.get("widgetType") || duplicatedElement.model.get("elType") || "";
+  return {
+    elementId: duplicatedElement.id,
+    type
+  };
+}
+
+// src/mcp/handlers/get-element-props.ts
+function handleGetElementProps(elementId) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  const type = container.model.get("widgetType") || container.model.get("elType");
+  if (!type) {
+    throw new Error(`Element with ID "${elementId}" has no type`);
+  }
+  const elementType = getElementType(type);
+  if (!elementType) {
+    throw new Error(`Element type "${type}" is not atomic`);
+  }
+  const propsSchema = elementType.propsSchema;
+  const propKeys = Object.keys(propsSchema);
+  return getElementSettings(elementId, propKeys);
+}
+
+// src/mcp/handlers/get-element-schema.ts
+import { getStylesSchema } from "@elementor/editor-styles";
+function handleGetElementSchema(elementType) {
+  const elementTypeData = getElementType(elementType);
+  if (!elementTypeData) {
+    throw new Error(`Element type "${elementType}" not found or is not atomic`);
+  }
+  return { ...elementTypeData, stylesSchema: getStylesSchema() };
+}
+
+// src/mcp/handlers/get-selected.ts
+function handleGetSelected() {
+  return getSelectedElements();
+}
+
+// src/mcp/handlers/get-styles.ts
+function handleGetStyles(elementId) {
+  const styles = getElementStyles(elementId);
+  if (!styles) {
+    return null;
+  }
+  return Object.fromEntries(
+    Object.entries(styles).map(([id, style]) => [
+      id,
+      {
+        id: style.id,
+        label: style.label,
+        type: style.type,
+        variants: style.variants.map((variant) => ({
+          meta: variant.meta,
+          props: variant.props,
+          custom_css: variant.custom_css
+        }))
+      }
+    ])
+  );
+}
+
+// src/mcp/handlers/list-available-types.ts
+function handleListAvailableTypes() {
+  const widgetsCache = getWidgetsCache();
+  if (!widgetsCache) {
+    return [];
+  }
+  const availableTypes = [];
+  Object.entries(widgetsCache).forEach(([type, config]) => {
+    if (config?.atomic_controls && config?.atomic_props_schema) {
+      availableTypes.push({
+        type,
+        title: config.title || type
+      });
     }
-    if (doesElementContainAnchor(child)) {
-      return true;
+  });
+  return availableTypes;
+}
+
+// src/mcp/handlers/move-element.ts
+function handleMoveElement({
+  elementId,
+  targetContainerId
+}) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  const targetContainer = getContainer(targetContainerId);
+  if (!targetContainer) {
+    throw new Error(`Target container with ID "${targetContainerId}" not found`);
+  }
+  moveElement({
+    elementId,
+    targetContainerId,
+    options: { useHistory: true }
+  });
+  return { success: true };
+}
+
+// src/mcp/handlers/select-element.ts
+function handleSelectElement(elementId) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
+  }
+  selectElement(elementId);
+  return { success: true };
+}
+function handleSelectMultipleElements(elementIds) {
+  elementIds.forEach((elementId) => {
+    const container = getContainer(elementId);
+    if (container) {
+      selectElement(elementId);
     }
+  });
+  return { success: true };
+}
+
+// src/mcp/handlers/update-props.ts
+function handleUpdateProps({ elementId, props }) {
+  const container = getContainer(elementId);
+  if (!container) {
+    throw new Error(`Element with ID "${elementId}" not found`);
   }
-  return false;
+  updateElementSettings({
+    id: elementId,
+    props,
+    withHistory: true
+  });
+  return { success: true };
 }
-function findElementIdOf(element) {
-  return element.closest("[data-id]")?.dataset.id || null;
+
+// src/mcp/handlers/update-styles.ts
+function handleUpdateStyles({
+  elementId,
+  styleId,
+  styles,
+  breakpoint = "desktop",
+  state = null
+}) {
+  const resolvedBreakpoint = resolveBreakpointId(breakpoint);
+  const resolvedState = state === null || state === void 0 ? null : state;
+  const elementStyles = getElementStyles(elementId);
+  if (!elementStyles) {
+    throw new Error(`Element with ID "${elementId}" has no styles. Create a style first.`);
+  }
+  const resolvedStyleId = styleId || Object.keys(elementStyles)[0];
+  if (!resolvedStyleId) {
+    throw new Error(`Element with ID "${elementId}" has no styles. Create a style first.`);
+  }
+  updateElementStyle({
+    elementId,
+    styleId: resolvedStyleId,
+    meta: { breakpoint: resolvedBreakpoint, state: resolvedState },
+    props: styles
+  });
+  return { success: true };
 }
-function getElementDOM(id) {
+
+// src/mcp/elements-tool.ts
+var actionEnum = z.enum([
+  "get-element-schema",
+  "get-element-props",
+  "create-element",
+  "update-props",
+  "create-style",
+  "get-styles",
+  "update-styles",
+  "delete-style",
+  "delete",
+  "duplicate",
+  "move",
+  "select",
+  "deselect",
+  "deselect-all",
+  "get-selected",
+  "list-available-types"
+]);
+var schema = {
+  action: actionEnum.describe("The element operation to perform."),
+  elementId: z.string().optional().describe("The ID of the target element"),
+  elementIds: z.array(z.string()).optional().describe("Array of element IDs for multi-element operations"),
+  elementType: z.string().optional().describe(
+    "The type of element to create. Must be an atomic element type (required for create-element and get-element-schema actions)"
+  ),
+  props: z.record(z.any()).optional().describe("Props object for creating or updating an element. Must match the element type's propsSchema."),
+  containerId: z.string().optional().describe(
+    'Parent container ID for element creation or move operations. Use "document" if parent is the document root.'
+  ),
+  targetContainerId: z.string().optional().describe("Target container ID for move operations"),
+  styles: z.record(z.any()).optional().describe(
+    "Styles object for creating or updating element styles. Must match the element type's stylesSchema."
+  ),
+  styleId: z.string().optional().describe(
+    "Style definition ID for style operations. If not provided, the first available style will be used (for update/delete)."
+  ),
+  breakpoint: z.string().optional().describe('Breakpoint for style operations (e.g., "desktop", "tablet", "mobile"). Defaults to "desktop".'),
+  state: z.string().optional().describe('State for style operations (e.g., "hover", "active", or null). Defaults to null.'),
+  classesProp: z.string().optional().describe('Classes property name for create-style action. Defaults to "classes".'),
+  label: z.string().optional().describe('Label for create-style action. Defaults to "local".'),
+  custom_css: z.object({ raw: z.string() }).optional().describe("Custom CSS object with raw CSS string for create-style action.")
+};
+function routeAction(params) {
   try {
-    return getContainer(id)?.view?.el || null;
-  } catch {
-    return null;
+    switch (params.action) {
+      case "get-element-schema":
+        if (!params.elementType) {
+          throw new Error("elementType is required for get-element-schema action");
+        }
+        return handleGetElementSchema(params.elementType);
+      case "get-element-props":
+        if (!params.elementId) {
+          throw new Error("elementId is required for get-element-props action");
+        }
+        return handleGetElementProps(params.elementId);
+      case "create-element":
+        if (!params.elementType) {
+          throw new Error("elementType is required for create-element action");
+        }
+        if (!params.containerId) {
+          throw new Error("containerId is required for create-element action");
+        }
+        return handleCreateElement({
+          elementType: params.elementType,
+          containerId: params.containerId,
+          props: params.props,
+          styles: params.styles
+        });
+      case "update-props":
+        if (!params.elementId) {
+          throw new Error("elementId is required for update-props action");
+        }
+        if (!params.props) {
+          throw new Error("props is required for update-props action");
+        }
+        return handleUpdateProps({
+          elementId: params.elementId,
+          props: params.props
+        });
+      case "create-style":
+        if (!params.elementId) {
+          throw new Error("elementId is required for create-style action");
+        }
+        if (!params.styles) {
+          throw new Error("styles is required for create-style action");
+        }
+        return handleCreateStyle({
+          elementId: params.elementId,
+          styleId: params.styleId,
+          classesProp: params.classesProp,
+          label: params.label,
+          styles: params.styles,
+          breakpoint: params.breakpoint,
+          state: params.state,
+          customCss: params.custom_css
+        });
+      case "get-styles":
+        if (!params.elementId) {
+          throw new Error("elementId is required for get-styles action");
+        }
+        return handleGetStyles(params.elementId);
+      case "update-styles":
+        if (!params.elementId) {
+          throw new Error("elementId is required for update-styles action");
+        }
+        if (!params.styles) {
+          throw new Error("styles is required for update-styles action");
+        }
+        return handleUpdateStyles({
+          elementId: params.elementId,
+          styleId: params.styleId,
+          styles: params.styles,
+          breakpoint: params.breakpoint,
+          state: params.state
+        });
+      case "delete-style":
+        if (!params.elementId) {
+          throw new Error("elementId is required for delete-style action");
+        }
+        return handleDeleteStyle({
+          elementId: params.elementId,
+          styleId: params.styleId
+        });
+      case "delete":
+        if (!params.elementId) {
+          throw new Error("elementId is required for delete action");
+        }
+        return handleDeleteElement(params.elementId);
+      case "duplicate":
+        if (!params.elementId) {
+          throw new Error("elementId is required for duplicate action");
+        }
+        return handleDuplicateElement(params.elementId);
+      case "move":
+        if (!params.elementId) {
+          throw new Error("elementId is required for move action");
+        }
+        if (!params.targetContainerId) {
+          throw new Error("targetContainerId is required for move action");
+        }
+        return handleMoveElement({
+          elementId: params.elementId,
+          targetContainerId: params.targetContainerId
+        });
+      case "select":
+        if (params.elementIds && params.elementIds.length > 0) {
+          return handleSelectMultipleElements(params.elementIds);
+        }
+        if (!params.elementId) {
+          throw new Error("elementId or elementIds is required for select action");
+        }
+        return handleSelectElement(params.elementId);
+      case "deselect":
+        if (!params.elementId) {
+          throw new Error("elementId is required for deselect action");
+        }
+        return handleDeselectElement(params.elementId);
+      case "deselect-all":
+        return handleDeselectAllElements();
+      case "get-selected":
+        return handleGetSelected();
+      case "list-available-types":
+        return handleListAvailableTypes();
+      default:
+        throw new Error(`Unknown action: ${params.action}`);
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    throw new Error(`Failed to execute action "${params.action}": ${errorMessage}`);
   }
 }
-function isAnchorTag(tagName) {
-  return tagName.toLowerCase() === "a";
+function initElementsTool() {
+  getMCPByDomain("elements").addTool({
+    name: "elements",
+    schema,
+    description: `This tool manages individual Elementor atomic elements (v4).
+
+**When to use this tool:**
+
+Use this tool to create, update, delete, duplicate, move, and select individual atomic elements, as well as retrieve their schemas and current props.
+
+**Available actions:**
+
+- \`list-available-types\`: List all available atomic element types.
+- \`get-element-schema\`: Get the propsSchema and controls for an element type. Required before creating elements of a new type.
+- \`get-element-props\`: Get the current prop values for an existing element.
+- \`create-element\`: Create a new atomic element with specified props and styles (Important to match props and styles by the schema, use get-element-schema to get the schema first).
+- \`update-props\`: Update props for an existing element.
+- \`create-style\`: Create a new style definition for an element.
+- \`get-styles\`: Get all style definitions for an element.
+- \`update-styles\`: Update styles for an existing element's style variant.
+- \`delete-style\`: Delete a style definition from an element.
+- \`delete\`: Delete an element.
+- \`duplicate\`: Duplicate an existing element.
+- \`move\`: Move an element to a different container.
+- \`select\`: Select one or more elements.
+- \`deselect\`: Deselect a specific element.
+- \`deselect-all\`: Deselect all selected elements.
+- \`get-selected\`: Get currently selected elements.
+
+**Constraints:**
+
+- Before creating an element of a certain type for the first time, you MUST call \`get-element-schema\` to retrieve its schema.
+- You can only update props for existing elements.
+- All props must match the element type's propsSchema keys.
+- Element types must be atomic (have atomic_controls and atomic_props_schema).
+- Container IDs must exist and be valid before create/move operations.
+
+** Must do with every operation **
+As of the user can ask in multiple ways the creation of the element, you need to first get the list of available types with "list-available-types" action.
+After getting it, convert to the most relevant type that the user requested and if this is not clear, request for user input.
+After finding out the proper type, get the schema for it with "get-element-schema" action.
+
+** Styles and Settings propUtils **
+Getting the schema is important as it introduces the propUtils for the styles and settings.
+You can use the propUtils to create, update, delete, and get the values of the styles and settings.
+Settings exists in the result of the get-element-schema action -> propsSchema.
+Styles exists in the result of the get-element-schema action -> stylesSchema.
+
+**Examples:**
+
+Get schema for heading element:
+\`\`\`json
+{ "action": "get-element-schema", "elementType": "e-heading" }
+\`\`\`
+
+Create a heading element:
+\`\`\`json
+{ "action": "create-element", "elementType": "e-heading", "containerId": "document", "props": { "title": { $$type: "string", "value": "Hello World" } } }
+\`\`\`
+
+Update element props:
+\`\`\`json
+{ "action": "update-props", "elementId": "abc123", "props": { "title": "Updated Title" } }
+\`\`\`
+
+Create element style:
+\`\`\`json
+{ "action": "create-style", "elementId": "abc123", "styles": { "padding": "20px", "margin": "10px" } }
+\`\`\`
+
+Get element styles:
+\`\`\`json
+{ "action": "get-styles", "elementId": "abc123" }
+\`\`\`
+
+Update element styles:
+\`\`\`json
+{ "action": "update-styles", "elementId": "abc123", "styles": { "padding": "20px", "margin": "10px" } }
+\`\`\`
+
+Delete element style:
+\`\`\`json
+{ "action": "delete-style", "elementId": "abc123", "styleId": "style-id-123" }
+\`\`\``,
+    handler: async (params) => {
+      return routeAction(params);
+    }
+  });
 }
-function isElementorElement(element) {
-  return element.hasAttribute("data-id");
+
+// src/mcp/index.ts
+function initMcp() {
+  const { setMCPDescription } = getMCPByDomain2("elements");
+  setMCPDescription("Tools for managing atomic elements in Elementor v4 editor");
+  initElementsTool();
 }
 export {
   ELEMENT_STYLE_CHANGE_EVENT,
@@ -774,33 +1620,45 @@ export {
   createElements,
   deleteElement,
   deleteElementStyle,
+  dropElement,
   duplicateElement,
   duplicateElements,
   generateElementId,
   getAnchoredAncestorId,
   getAnchoredDescendantId,
   getContainer,
+  getCurrentDocumentContainer,
   getCurrentDocumentId,
+  getElementEditorSettings,
+  getElementInteractions,
   getElementLabel,
   getElementSetting,
   getElementSettings,
   getElementStyles,
+  getElementType,
   getElements,
   getLinkInLinkRestriction,
   getSelectedElements,
   getWidgetsCache,
+  initMcp as initElementsMcp,
   isElementAnchored,
+  moveElement,
+  moveElements,
+  playElementInteractions,
   removeElements,
   replaceElement,
   selectElement,
   shouldCreateNewLocalStyle,
   styleRerenderEvents,
+  updateElementEditorSettings,
+  updateElementInteractions,
   updateElementSettings,
   updateElementStyle,
   useElementChildren,
+  useElementEditorSettings,
+  useElementInteractions,
   useElementSetting,
   useElementSettings,
-  useElementType,
   useParentElement,
   useSelectedElement
 };