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

package/dist/index.mjs

@@ -198,16 +198,16 @@ var createConfig = ({
   replay,
   easing = "easeIn",
   relativeTo = "",
-  offsetTop = 0,
-  offsetBottom = 85
+  start = 85,
+  end = 15
 }) => ({
   $$type: "config",
   value: {
     replay: createBoolean(replay),
     easing: createString(easing),
     relativeTo: createString(relativeTo),
-    offsetTop: createSize(offsetTop, "%"),
-    offsetBottom: createSize(offsetBottom, "%")
+    start: createSize(start, "%"),
+    end: createSize(end, "%")
   }
 });
 var createSize = (value, defaultUnit, defaultValue) => {
@@ -241,8 +241,8 @@ var createAnimationPreset = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   customEffects
 }) => ({
   $$type: "animation-preset-props",
@@ -256,8 +256,8 @@ var createAnimationPreset = ({
       replay,
       easing,
       relativeTo,
-      offsetTop,
-      offsetBottom
+      start,
+      end
     })
   }
 });
@@ -272,26 +272,26 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
-  offsetTop,
-  offsetBottom,
+  start,
+  end,
   excludedBreakpoints,
   customEffects
 }) => ({
   $$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,
-      offsetTop,
-      offsetBottom,
+      start,
+      end,
       customEffects
     }),
     ...excludedBreakpoints && excludedBreakpoints.length > 0 && {
@@ -457,8 +457,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
-  offsetTop: 15,
-  offsetBottom: 85
+  start: 85,
+  end: 15
 };
 var TRIGGERS_WITHOUT_REPLAY = ["load", "scrollOn", "hover", "click"];
 var controlVisibilityConfig = {
@@ -467,8 +467,8 @@ var controlVisibilityConfig = {
   effectType: (values) => values.effect !== "custom",
   direction: (values) => values.effect !== "custom",
   relativeTo: (values) => values.trigger === "scrollOn",
-  offsetTop: (values) => values.trigger === "scrollOn",
-  offsetBottom: (values) => values.trigger === "scrollOn",
+  start: (values) => values.trigger === "scrollOn",
+  end: (values) => values.trigger === "scrollOn",
   duration: (values) => {
     const isRelativeToVisible = values.trigger === "scrollOn";
     return !isRelativeToVisible;
@@ -497,11 +497,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
   const replay = extractBoolean(interaction.animation.value.config?.value.replay, DEFAULT_VALUES.replay);
   const easing = extractString(interaction.animation.value.config?.value.easing, DEFAULT_VALUES.easing);
   const relativeTo = extractString(interaction.animation.value.config?.value.relativeTo, DEFAULT_VALUES.relativeTo);
-  const offsetTop = extractSize(interaction.animation.value.config?.value.offsetTop, DEFAULT_VALUES.offsetTop);
-  const offsetBottom = extractSize(
-    interaction.animation.value.config?.value.offsetBottom,
-    DEFAULT_VALUES.offsetBottom
-  );
+  const start = extractSize(interaction.animation.value.config?.value.start, DEFAULT_VALUES.start);
+  const end = extractSize(interaction.animation.value.config?.value.end, DEFAULT_VALUES.end);
   const interactionValues = {
     trigger,
     effect,
@@ -512,8 +509,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
-    offsetTop,
-    offsetBottom,
+    start,
+    end,
     customEffects
   };
   const TriggerControl = useControlComponent("trigger", true);
@@ -523,11 +520,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     "relativeTo",
     controlVisibilityConfig.relativeTo(interactionValues)
   );
-  const OffsetTopControl = useControlComponent("offsetTop", controlVisibilityConfig.offsetTop(interactionValues));
-  const OffsetBottomControl = useControlComponent(
-    "offsetBottom",
-    controlVisibilityConfig.offsetBottom(interactionValues)
-  );
+  const StartControl = useControlComponent("start", controlVisibilityConfig.start(interactionValues));
+  const EndControl = useControlComponent("end", controlVisibilityConfig.end(interactionValues));
   const CustomEffectControl = useControlComponent(
     "customEffects",
     controlVisibilityConfig.custom(interactionValues)
@@ -560,8 +554,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         replay: updates.replay ?? replay,
         easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
-        offsetTop: updates.offsetTop ?? offsetTop,
-        offsetBottom: updates.offsetBottom ?? offsetBottom,
+        start: updates.start ?? start,
+        end: updates.end ?? end,
         customEffects: updates.customEffects ?? customEffects
       })
     };
@@ -612,23 +606,23 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onChange: (v) => updateInteraction({ delay: v }),
       defaultValue: DEFAULT_VALUES.delay
     }
-  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __2("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
-    RelativeToControl,
+  ))), controlVisibilityConfig.relativeTo(interactionValues) && RelativeToControl && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, StartControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Start", "elementor") }, /* @__PURE__ */ React7.createElement(
+    StartControl,
     {
-      value: relativeTo,
-      onChange: (v) => updateInteraction({ relativeTo: v })
+      value: parseSizeValue(start, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ start: v })
     }
-  )), OffsetTopControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Offset Top", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetTopControl,
+  )), EndControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("End", "elementor") }, /* @__PURE__ */ React7.createElement(
+    EndControl,
     {
-      value: String(parseSizeValue(offsetTop, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetTop: v })
+      value: parseSizeValue(end, ["%"]).size?.toString() ?? "",
+      onChange: (v) => updateInteraction({ end: v })
     }
-  )), OffsetBottomControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Offset Bottom", "elementor") }, /* @__PURE__ */ React7.createElement(
-    OffsetBottomControl,
+  )), /* @__PURE__ */ React7.createElement(Field, { label: __2("Relative To", "elementor") }, /* @__PURE__ */ React7.createElement(
+    RelativeToControl,
     {
-      value: String(parseSizeValue(offsetBottom, ["%"]).size),
-      onChange: (v) => updateInteraction({ offsetBottom: v })
+      value: relativeTo,
+      onChange: (v) => updateInteraction({ relativeTo: v })
     }
   ))), /* @__PURE__ */ React7.createElement(Divider, null)), EasingControl && /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, /* @__PURE__ */ React7.createElement(Field, { label: __2("Easing", "elementor") }, /* @__PURE__ */ React7.createElement(
     EasingControl,
@@ -1346,53 +1340,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)
           }
         ]
       };
@@ -1402,85 +1416,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) {
@@ -1492,15 +1470,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;
@@ -1517,23 +1487,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),
@@ -1573,12 +1529,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
+      };
     }
   });
 };
@@ -1586,10 +1542,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