@elementor/editor-interactions 4.0.0-607 → 4.0.0-619

package/dist/index.d.mts

@@ -12,10 +12,6 @@ declare const InteractionsTab: ({ elementId }: {
     elementId: string;
 }) => React.JSX.Element;
 
-type AnimationOption = {
-    value: string;
-    label: string;
-};
 type InteractionConstants = {
     defaultDuration: number;
     defaultDelay: number;
@@ -25,7 +21,6 @@ type InteractionConstants = {
 };
 type InteractionsConfig = {
     constants: InteractionConstants;
-    animationOptions: AnimationOption[];
 };
 type FieldProps<T = string> = {
     value: T;

package/dist/index.d.ts

@@ -12,10 +12,6 @@ declare const InteractionsTab: ({ elementId }: {
     elementId: string;
 }) => React.JSX.Element;
 
-type AnimationOption = {
-    value: string;
-    label: string;
-};
 type InteractionConstants = {
     defaultDuration: number;
     defaultDelay: number;
@@ -25,7 +21,6 @@ type InteractionConstants = {
 };
 type InteractionsConfig = {
     constants: InteractionConstants;
-    animationOptions: AnimationOption[];
 };
 type FieldProps<T = string> = {
     value: T;

package/dist/index.js

@@ -936,8 +936,7 @@ var DEFAULT_CONFIG = {
     slideDistance: 100,
     scaleStart: 0.5,
     easing: "linear"
-  },
-  animationOptions: []
+  }
 };
 function getInteractionsConfig() {
   return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
@@ -1387,6 +1386,259 @@ function cleanInteractionIds(elementId) {
   container.model.set("interactions", updatedInteractions);
 }
 
+// src/mcp/index.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+
+// src/mcp/constants.ts
+var MAX_INTERACTIONS_PER_ELEMENT = 5;
+
+// src/mcp/resources/interactions-schema-resource.ts
+var INTERACTIONS_SCHEMA_URI = "elementor://interactions/schema";
+var schema = {
+  triggers: BASE_TRIGGERS.map((key) => ({
+    value: key,
+    label: TRIGGER_OPTIONS[key] ?? key
+  })),
+  effects: [
+    { value: "fade", label: "Fade" },
+    { value: "slide", label: "Slide" },
+    { value: "scale", label: "Scale" }
+  ],
+  effectTypes: [
+    { value: "in", label: "In" },
+    { value: "out", label: "Out" }
+  ],
+  directions: [
+    { value: "top", label: "Top", note: "" },
+    { value: "bottom", label: "Bottom", note: "" },
+    { value: "left", label: "Left", note: "" },
+    { value: "right", label: "Right", note: "" },
+    { value: "", label: "None", note: "Slide animation must have a direction" }
+  ],
+  easings: Object.entries(EASING_OPTIONS).map(([value, label]) => ({ value, label })),
+  timing: {
+    duration: { min: 0, max: 1e4, unit: "ms", description: "Animation duration in milliseconds" },
+    delay: { min: 0, max: 1e4, unit: "ms", description: "Animation delay in milliseconds" }
+  },
+  excludedBreakpoints: {
+    type: "string[]",
+    description: "List of breakpoint IDs on which this interaction is disabled. Omit to enable on all breakpoints."
+  },
+  maxInteractionsPerElement: MAX_INTERACTIONS_PER_ELEMENT
+};
+var initInteractionsSchemaResource = (reg) => {
+  const { resource } = reg;
+  resource(
+    "interactions-schema",
+    INTERACTIONS_SCHEMA_URI,
+    {
+      description: "Schema describing all available options for element interactions (triggers, effects, easings, timing, breakpoints, etc.)."
+    },
+    async () => {
+      return {
+        contents: [
+          {
+            uri: INTERACTIONS_SCHEMA_URI,
+            text: JSON.stringify(schema, null, 2)
+          }
+        ]
+      };
+    }
+  );
+};
+
+// src/mcp/tools/manage-element-interaction-tool.ts
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_schema = require("@elementor/schema");
+var EMPTY_INTERACTIONS = {
+  version: 1,
+  items: []
+};
+var initManageElementInteractionTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "manage-element-interaction",
+    description: `Read or manage interactions (animations) on an element. Always call with action=get first to see existing interactions before making changes.
+
+Actions:
+- get: Read the current interactions on the element.
+- add: Add a new interaction (max ${MAX_INTERACTIONS_PER_ELEMENT} per element).
+- update: Update an existing interaction by its interactionId.
+- delete: Remove a specific interaction by its interactionId.
+- clear: Remove all interactions from the element.
+
+For add/update, provide: trigger, effect, effectType, direction (empty string for non-slide effects), duration, delay, easing.
+Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).`,
+    schema: {
+      elementId: import_schema.z.string().describe("The ID of the element to read or modify interactions on"),
+      action: import_schema.z.enum(["get", "add", "update", "delete", "clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),
+      interactionId: import_schema.z.string().optional().describe('Interaction ID \u2014 required for update and delete. Obtain from a prior "get" call.'),
+      trigger: import_schema.z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"),
+      effect: import_schema.z.enum(["fade", "slide", "scale"]).optional().describe("Animation effect type"),
+      effectType: import_schema.z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"),
+      direction: import_schema.z.enum(["top", "bottom", "left", "right", ""]).optional().describe("Direction for slide effect. Use empty string for fade/scale."),
+      duration: import_schema.z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),
+      delay: import_schema.z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),
+      easing: import_schema.z.string().optional().describe("Easing function. See interactions schema for options."),
+      excludedBreakpoints: import_schema.z.array(import_schema.z.string()).optional().describe(
+        'Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Omit to enable on all breakpoints.'
+      )
+    },
+    requiredResources: [
+      { uri: INTERACTIONS_SCHEMA_URI, description: "Interactions schema with all available options" }
+    ],
+    isDestructive: true,
+    handler: (input) => {
+      const {
+        elementId,
+        action,
+        interactionId,
+        trigger,
+        effect,
+        effectType,
+        direction,
+        duration,
+        delay,
+        easing,
+        excludedBreakpoints
+      } = input;
+      const allInteractions = interactionsRepository.all();
+      const elementData = allInteractions.find((data) => data.elementId === elementId);
+      const currentInteractions = elementData?.interactions ?? EMPTY_INTERACTIONS;
+      if (action === "get") {
+        const summary = currentInteractions.items.map((item) => {
+          const { value } = item;
+          const animValue = value.animation.value;
+          const timingValue = animValue.timing_config.value;
+          const configValue = animValue.config.value;
+          return {
+            id: extractString(value.interaction_id),
+            trigger: extractString(value.trigger),
+            effect: extractString(animValue.effect),
+            effectType: extractString(animValue.type),
+            direction: extractString(animValue.direction),
+            duration: extractSize(timingValue.duration),
+            delay: extractSize(timingValue.delay),
+            easing: extractString(configValue.easing),
+            excludedBreakpoints: extractExcludedBreakpoints(value.breakpoints)
+          };
+        });
+        return JSON.stringify({
+          elementId,
+          interactions: summary,
+          count: summary.length
+        });
+      }
+      let updatedItems = [...currentInteractions.items];
+      switch (action) {
+        case "add": {
+          if (updatedItems.length >= MAX_INTERACTIONS_PER_ELEMENT) {
+            throw new Error(
+              `Cannot add more than ${MAX_INTERACTIONS_PER_ELEMENT} interactions per element. Current count: ${updatedItems.length}. Delete an existing interaction first.`
+            );
+          }
+          const newItem = createInteractionItem({
+            interactionId: generateTempInteractionId(),
+            trigger: trigger ?? DEFAULT_VALUES.trigger,
+            effect: effect ?? DEFAULT_VALUES.effect,
+            type: effectType ?? DEFAULT_VALUES.type,
+            direction: direction ?? DEFAULT_VALUES.direction,
+            duration: duration ?? DEFAULT_VALUES.duration,
+            delay: delay ?? DEFAULT_VALUES.delay,
+            replay: DEFAULT_VALUES.replay,
+            easing: easing ?? DEFAULT_VALUES.easing,
+            excludedBreakpoints
+          });
+          updatedItems = [...updatedItems, newItem];
+          break;
+        }
+        case "update": {
+          if (!interactionId) {
+            throw new Error("interactionId is required for the update action.");
+          }
+          const itemIndex = updatedItems.findIndex(
+            (item) => extractString(item.value.interaction_id) === interactionId
+          );
+          if (itemIndex === -1) {
+            throw new Error(
+              `Interaction with ID "${interactionId}" not found on element "${elementId}".`
+            );
+          }
+          const existingItem = updatedItems[itemIndex];
+          const existingValue = existingItem.value;
+          const existingAnimation = existingValue.animation.value;
+          const existingTiming = existingAnimation.timing_config.value;
+          const existingConfig = existingAnimation.config.value;
+          const existingExcludedBreakpoints = extractExcludedBreakpoints(existingValue.breakpoints);
+          const updatedItem = createInteractionItem({
+            interactionId,
+            trigger: trigger ?? extractString(existingValue.trigger),
+            effect: effect ?? extractString(existingAnimation.effect),
+            type: effectType ?? extractString(existingAnimation.type),
+            direction: direction !== void 0 ? direction : extractString(existingAnimation.direction),
+            duration: duration !== void 0 ? duration : extractSize(existingTiming.duration),
+            delay: delay !== void 0 ? delay : extractSize(existingTiming.delay),
+            replay: existingConfig.replay?.value ?? DEFAULT_VALUES.replay,
+            easing: easing ?? extractString(existingConfig.easing),
+            excludedBreakpoints: excludedBreakpoints !== void 0 ? excludedBreakpoints : existingExcludedBreakpoints
+          });
+          updatedItems = [
+            ...updatedItems.slice(0, itemIndex),
+            updatedItem,
+            ...updatedItems.slice(itemIndex + 1)
+          ];
+          break;
+        }
+        case "delete": {
+          if (!interactionId) {
+            throw new Error("interactionId is required for the delete action.");
+          }
+          const beforeCount = updatedItems.length;
+          updatedItems = updatedItems.filter(
+            (item) => extractString(item.value.interaction_id) !== interactionId
+          );
+          if (updatedItems.length === beforeCount) {
+            throw new Error(
+              `Interaction with ID "${interactionId}" not found on element "${elementId}".`
+            );
+          }
+          break;
+        }
+        case "clear": {
+          updatedItems = [];
+          break;
+        }
+      }
+      const updatedInteractions = {
+        ...currentInteractions,
+        items: updatedItems
+      };
+      try {
+        (0, import_editor_elements5.updateElementInteractions)({ elementId, interactions: updatedInteractions });
+      } catch (error) {
+        throw new Error(
+          `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
+        );
+      }
+      return JSON.stringify({
+        success: true,
+        action,
+        elementId,
+        interactionCount: updatedItems.length
+      });
+    }
+  });
+};
+
+// src/mcp/index.ts
+var initMcpInteractions = () => {
+  const reg = (0, import_editor_mcp.getMCPByDomain)("interactions", {
+    instructions: "MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view."
+  });
+  initInteractionsSchemaResource(reg);
+  initManageElementInteractionTool(reg);
+};
+
 // src/init.ts
 function init() {
   try {
@@ -1422,6 +1674,7 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
+    initMcpInteractions();
   } catch (error) {
     throw error;
   }