@elementor/editor-interactions 4.0.0-609 → 4.0.0-621

package/dist/index.mjs

@@ -280,13 +280,13 @@ var createInteractionItem = ({
   $$type: "interaction-item",
   value: {
     ...interactionId && { interaction_id: createString(interactionId) },
-    trigger: createString(trigger),
+    trigger: createString(trigger ?? ""),
     animation: createAnimationPreset({
-      effect,
-      type,
+      effect: effect ?? "",
+      type: type ?? "",
       direction,
-      duration,
-      delay,
+      duration: duration ?? 0,
+      delay: delay ?? 0,
       replay,
       easing,
       relativeTo,
@@ -889,8 +889,7 @@ var DEFAULT_CONFIG = {
     slideDistance: 100,
     scaleStart: 0.5,
     easing: "linear"
-  },
-  animationOptions: []
+  }
 };
 function getInteractionsConfig() {
   return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
@@ -1347,53 +1346,73 @@ import { getMCPByDomain } from "@elementor/editor-mcp";
 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
+import { isProActive } from "@elementor/utils";
+
+// src/mcp/tools/schema.ts
+import { z } from "@elementor/schema";
+var baseSchema = {
+  trigger: z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"),
+  effect: z.enum(["fade", "slide", "scale"]).optional().describe("Animation effect type"),
+  effectType: z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"),
+  direction: z.enum(["top", "bottom", "left", "right", ""]).optional().describe("Direction for slide effect. Use empty string for fade/scale."),
+  duration: z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),
+  delay: z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),
+  easing: z.string().optional().describe("Easing function. See interactions schema for options."),
+  excludedBreakpoints: z.array(z.string()).optional().describe(
+    'Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Omit to enable on all breakpoints.'
+  )
 };
+var proSchema = {
+  trigger: z.enum(["load", "scrollIn", "scrollOut", "scrollOn", "hover", "click"]).optional().describe("Event that triggers the animation"),
+  effect: z.enum(["fade", "slide", "scale", "custom"]).optional().describe("Animation effect type"),
+  customEffect: z.object({
+    keyframes: z.array(
+      z.object({
+        stop: z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),
+        value: z.object({
+          opacity: z.number().min(0).max(1).describe("The opacity of the keyframe"),
+          scale: z.object({
+            x: z.number().min(0).max(1).describe("The x scale of the keyframe"),
+            y: z.number().min(0).max(1).describe("The y scale of the keyframe")
+          }).optional().describe("The scale of the keyframe"),
+          rotate: z.object({
+            x: z.number().min(0).max(360).describe("The x rotate of the keyframe"),
+            y: z.number().min(0).max(360).describe("The y rotate of the keyframe"),
+            z: z.number().min(0).max(360).describe("The z rotate of the keyframe")
+          }).optional().describe("The rotate of the keyframe"),
+          move: z.object({
+            x: z.number().min(0).max(1).describe("The x move of the keyframe"),
+            y: z.number().min(0).max(1).describe("The y move of the keyframe"),
+            z: z.number().min(0).max(1).describe("The z move of the keyframe")
+          }).optional().describe("The move of the keyframe"),
+          skew: z.object({
+            x: z.number().min(0).max(360).describe("The x skew of the keyframe"),
+            y: z.number().min(0).max(360).describe("The y skew of the keyframe")
+          }).optional().describe("The skew of the keyframe")
+        })
+      })
+    ).describe("The keyframes of the custom effect")
+  }).optional().describe("The custom effect to use for the animation")
+};
+
+// src/mcp/resources/interactions-schema-resource.ts
+var INTERACTIONS_SCHEMA_URI = "elementor://interactions/schema";
 var initInteractionsSchemaResource = (reg) => {
   const { resource } = reg;
+  const schema = isProActive() ? { ...baseSchema, ...proSchema } : baseSchema;
   resource(
     "interactions-schema",
     INTERACTIONS_SCHEMA_URI,
     {
-      description: "Schema describing all available options for element interactions (triggers, effects, easings, timing, breakpoints, etc.)."
+      description: "Schema describing all available options for element interactions."
     },
     async () => {
       return {
         contents: [
           {
             uri: INTERACTIONS_SCHEMA_URI,
-            text: JSON.stringify(schema, null, 2)
+            mimeType: "application/json",
+            text: JSON.stringify(schema)
           }
         ]
       };
@@ -1403,85 +1422,49 @@ var initInteractionsSchemaResource = (reg) => {
 
 // src/mcp/tools/manage-element-interaction-tool.ts
 import { updateElementInteractions as updateElementInteractions2 } from "@elementor/editor-elements";
-import { z } from "@elementor/schema";
+import { z as z2 } from "@elementor/schema";
+import { isProActive as isProActive2 } from "@elementor/utils";
 var EMPTY_INTERACTIONS = {
   version: 1,
   items: []
 };
 var initManageElementInteractionTool = (reg) => {
   const { addTool } = reg;
+  const extendedSchema = isProActive2() ? { ...baseSchema, ...proSchema } : baseSchema;
+  const schema = {
+    elementId: z2.string().describe("The ID of the element to read or modify interactions on"),
+    action: z2.enum(["get", "add", "update", "delete", "clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),
+    interactionId: z2.string().optional().describe('Interaction ID \u2014 required for update and delete. Obtain from a prior "get" call.'),
+    ...extendedSchema
+  };
   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: z.string().describe("The ID of the element to read or modify interactions on"),
-      action: z.enum(["get", "add", "update", "delete", "clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),
-      interactionId: z.string().optional().describe('Interaction ID \u2014 required for update and delete. Obtain from a prior "get" call.'),
-      trigger: z.enum(["load", "scrollIn"]).optional().describe("Event that triggers the animation"),
-      effect: z.enum(["fade", "slide", "scale"]).optional().describe("Animation effect type"),
-      effectType: z.enum(["in", "out"]).optional().describe("Whether the animation plays in or out"),
-      direction: z.enum(["top", "bottom", "left", "right", ""]).optional().describe("Direction for slide effect. Use empty string for fade/scale."),
-      duration: z.number().min(0).max(1e4).optional().describe("Animation duration in milliseconds"),
-      delay: z.number().min(0).max(1e4).optional().describe("Animation delay in milliseconds"),
-      easing: z.string().optional().describe("Easing function. See interactions schema for options."),
-      excludedBreakpoints: z.array(z.string()).optional().describe(
-        'Breakpoint IDs on which this interaction is disabled (e.g. ["mobile", "tablet"]). Omit to enable on all breakpoints.'
-      )
-    },
+    description: `Manage the element interaction.`,
+    schema,
     requiredResources: [
       { uri: INTERACTIONS_SCHEMA_URI, description: "Interactions schema with all available options" }
     ],
     isDestructive: true,
+    outputSchema: {
+      success: z2.boolean().describe("Whether the action was successful"),
+      action: z2.enum(["get", "add", "update", "delete", "clear"]).describe('Operation to perform. Use "get" first to inspect existing interactions.'),
+      elementId: z2.string().optional().describe("The ID of the element to read or modify interactions on"),
+      interactions: z2.array(z2.any()).optional().describe("The interactions on the element"),
+      count: z2.number().optional().describe("The number of interactions on the element")
+    },
     handler: (input) => {
-      const {
-        elementId,
-        action,
-        interactionId,
-        trigger,
-        effect,
-        effectType,
-        direction,
-        duration,
-        delay,
-        easing,
-        excludedBreakpoints
-      } = input;
+      const { elementId, action, interactionId, ...animationData } = 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({
+        return {
+          success: true,
           elementId,
-          interactions: summary,
-          count: summary.length
-        });
+          action,
+          interactions: currentInteractions.items,
+          count: currentInteractions.items.length
+        };
       }
       let updatedItems = [...currentInteractions.items];
       switch (action) {
@@ -1493,15 +1476,7 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
           }
           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
+            ...animationData
           });
           updatedItems = [...updatedItems, newItem];
           break;
@@ -1518,23 +1493,9 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
               `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
+            ...animationData
           });
           updatedItems = [
             ...updatedItems.slice(0, itemIndex),
@@ -1574,12 +1535,12 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
         );
       }
-      return JSON.stringify({
+      return {
         success: true,
         action,
         elementId,
-        interactionCount: updatedItems.length
-      });
+        count: updatedItems.length
+      };
     }
   });
 };
@@ -1587,10 +1548,71 @@ Use excludedBreakpoints to disable the animation on specific responsive breakpoi
 // src/mcp/index.ts
 var initMcpInteractions = () => {
   const reg = 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."
+    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.
+		** IMPORTANT **
+		Use the "interactions-schema" resource to get the schema of the interactions.
+		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 (required for slide effect), duration, delay, easing.
+		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
+		Example Get Request:
+		{
+			"elementId": "123",
+			"action": "get",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Add Request:
+		{
+			"elementId": "123",
+			"action": "add",
+			"animationData": {
+				"effectType": "in",
+				"direction": "top",
+				"trigger": "click",
+				"effect": "fade",
+				"duration": 1000,
+				"delay": 0,
+				"easing": "easeIn",
+				"excludedBreakpoints": ["mobile", "tablet"],
+			}
+		}
+		Example Update Request:
+		{
+			"elementId": "123",
+			"action": "update",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Delete Request:
+		{
+			"elementId": "123",
+			"action": "delete",
+			"interactionId": "123",
+		}
+		Example Clear Request:
+		{
+			"elementId": "123",
+			"action": "clear",
+		}
+		`
+  });
+  reg.waitForReady().then(() => {
+    initInteractionsSchemaResource(reg);
+    initManageElementInteractionTool(reg);
   });
-  initInteractionsSchemaResource(reg);
-  initManageElementInteractionTool(reg);
 };
 
 // src/init.ts