@elementor/editor-interactions 4.0.0-682 → 4.0.0-beta5

package/dist/index.js

@@ -39,6 +39,8 @@ __export(index_exports, {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX: () => ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState: () => EmptyState,
   InteractionsTab: () => InteractionsTab,
+  REPEAT_OPTIONS: () => REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS: () => REPEAT_TOOLTIPS,
   REPLAY_OPTIONS: () => REPLAY_OPTIONS,
   TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
   buildDisplayLabel: () => buildDisplayLabel,
@@ -186,6 +188,110 @@ var createSizeValue = (size, unit) => {
   return { size, unit };
 };
 
+// src/utils/custom-effect-to-prop-value.ts
+var CUSTOM_EFFECT_TYPE = "custom-effect";
+var KEYFRAMES_TYPE = "keyframes";
+var KEYFRAME_STOP_TYPE = "keyframe-stop";
+var KEYFRAME_STOP_SETTINGS_TYPE = "keyframe-stop-settings";
+var SIZE_TYPE = "size";
+var NUMBER_TYPE = "number";
+var TRANSFORM_SCALE_TYPE = "transform-scale";
+var TRANSFORM_ROTATE_TYPE = "transform-rotate";
+var TRANSFORM_MOVE_TYPE = "transform-move";
+var TRANSFORM_SKEW_TYPE = "transform-skew";
+var UNIT_PERCENT = "%";
+var UNIT_DEG = "deg";
+var UNIT_PX = "px";
+var isPlainCustomEffect = (v) => typeof v === "object" && v !== null && "keyframes" in v && Array.isArray(v.keyframes) && !("$$type" in v);
+var toSizePropValue = (size, unit = UNIT_PERCENT) => ({
+  $$type: SIZE_TYPE,
+  value: { size, unit }
+});
+var toNumberPropValue = (n) => ({
+  $$type: NUMBER_TYPE,
+  value: n
+});
+var toDimensionalNumberPropValue = (type, plain, defaults) => ({
+  $$type: type,
+  value: {
+    x: toNumberPropValue(plain.x ?? defaults.x),
+    y: toNumberPropValue(plain.y ?? defaults.y),
+    z: toNumberPropValue(plain.z ?? defaults.z)
+  }
+});
+var toDimensionalSizePropValue = (type, plain, defaults, unit) => ({
+  $$type: type,
+  value: {
+    x: toSizePropValue(plain.x ?? defaults.x, unit),
+    y: toSizePropValue(plain.y ?? defaults.y, unit),
+    z: toSizePropValue(plain.z ?? defaults.z, unit)
+  }
+});
+var toSkewPropValue = (plain) => ({
+  $$type: TRANSFORM_SKEW_TYPE,
+  value: {
+    x: toSizePropValue(plain.x ?? 0, UNIT_DEG),
+    y: toSizePropValue(plain.y ?? 0, UNIT_DEG)
+  }
+});
+var toKeyframeStopSettingsPropValue = (plain) => {
+  const value = {};
+  if (plain.opacity !== void 0) {
+    const percent = plain.opacity <= 1 ? Math.round(plain.opacity * 100) : plain.opacity;
+    value.opacity = toSizePropValue(percent);
+  }
+  if (plain.scale !== void 0) {
+    value.scale = toDimensionalNumberPropValue(TRANSFORM_SCALE_TYPE, plain.scale, { x: 1, y: 1, z: 1 });
+  }
+  if (plain.rotate !== void 0) {
+    value.rotate = toDimensionalSizePropValue(
+      TRANSFORM_ROTATE_TYPE,
+      plain.rotate,
+      { x: 0, y: 0, z: 0 },
+      UNIT_DEG
+    );
+  }
+  if (plain.move !== void 0) {
+    value.move = toDimensionalSizePropValue(TRANSFORM_MOVE_TYPE, plain.move, { x: 0, y: 0, z: 0 }, UNIT_PX);
+  }
+  if (plain.skew !== void 0) {
+    value.skew = toSkewPropValue(plain.skew);
+  }
+  return { $$type: KEYFRAME_STOP_SETTINGS_TYPE, value };
+};
+var isPlainKeyframe = (v) => typeof v === "object" && v !== null && "stop" in v && "value" in v && !("$$type" in v);
+var toKeyframeStopPropValue = (item) => {
+  if (!isPlainKeyframe(item)) {
+    return item;
+  }
+  return {
+    $$type: KEYFRAME_STOP_TYPE,
+    value: {
+      stop: toSizePropValue(item.stop),
+      settings: toKeyframeStopSettingsPropValue(item.value)
+    }
+  };
+};
+var toKeyframesPropValue = (keyframes) => ({
+  $$type: KEYFRAMES_TYPE,
+  value: keyframes.map(toKeyframeStopPropValue)
+});
+var plainCustomEffectToPropValue = (plain) => ({
+  $$type: CUSTOM_EFFECT_TYPE,
+  value: {
+    keyframes: toKeyframesPropValue(plain.keyframes)
+  }
+});
+var toCustomEffectPropValue = (customEffects) => {
+  if (customEffects === void 0) {
+    return void 0;
+  }
+  if (isPlainCustomEffect(customEffects)) {
+    return plainCustomEffectToPropValue(customEffects);
+  }
+  return customEffects;
+};
+
 // src/utils/get-interactions-config.ts
 function getInteractionsConfig() {
   return window.ElementorInteractionsConfig ?? {};
@@ -224,7 +330,7 @@ var createBoolean = (value) => ({
 var createConfig = ({
   replay,
   easing = "easeIn",
-  relativeTo = "",
+  relativeTo = "viewport",
   repeat = "",
   times = 1,
   start = 85,
@@ -277,25 +383,28 @@ var createAnimationPreset = ({
   start,
   end,
   customEffects
-}) => ({
-  $$type: "animation-preset-props",
-  value: {
-    effect: createString(effect),
-    custom_effect: customEffects,
-    type: createString(type),
-    direction: createString(direction ?? ""),
-    timing_config: createTimingConfig(duration, delay),
-    config: createConfig({
-      replay,
-      easing,
-      relativeTo,
-      repeat,
-      times,
-      start,
-      end
-    })
-  }
-});
+}) => {
+  const customEffectProp = toCustomEffectPropValue(customEffects);
+  return {
+    $$type: "animation-preset-props",
+    value: {
+      effect: createString(effect),
+      ...customEffectProp !== void 0 && { custom_effect: customEffectProp },
+      type: createString(type),
+      direction: createString(direction ?? ""),
+      timing_config: createTimingConfig(duration, delay),
+      config: createConfig({
+        replay,
+        easing,
+        relativeTo,
+        repeat,
+        times,
+        start,
+        end
+      })
+    }
+  };
+};
 var createInteractionItem = ({
   trigger,
   effect,
@@ -757,7 +866,6 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.times(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const containerRef = (0, import_react6.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -792,19 +900,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
-    TriggerControl,
-    {
-      value: trigger,
-      onChange: (v) => updateInteraction({ trigger: v })
-    }
-  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true,
-      anchorRef: containerRef
+      disabled: true
     }
   ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
@@ -867,7 +968,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
@@ -1217,6 +1318,9 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/init.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+
 // src/commands/paste-interactions.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
@@ -1417,7 +1521,6 @@ var InteractionsPromotionChip = (0, import_react12.forwardRef)(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1565,58 +1668,128 @@ function EffectType({ value, onChange }) {
   return /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/replay.tsx
-var React18 = __toESM(require("react"));
+// src/components/controls/repeat.tsx
+var React19 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_editor_controls9 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
-var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
+
+// src/ui/promotion-overlay-layout.tsx
+var React18 = __toESM(require("react"));
+var import_react14 = require("react");
+var import_ui10 = require("@elementor/ui");
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+var PromotionOverlayLayout = (0, import_react14.forwardRef)(
+  ({ children, promotionChip }, ref) => /* @__PURE__ */ React18.createElement(import_ui10.Box, { ref, sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, promotionChip))
+);
+
+// src/components/controls/repeat.tsx
+var TRACKING_DATA3 = { target_name: "interactions_repeat", location_l2: "interactions" };
+var REPEAT_OPTIONS = {
+  times: (0, import_i18n13.__)("times", "elementor"),
+  loop: (0, import_i18n13.__)("loop", "elementor")
+};
+var REPEAT_TOOLTIPS = {
+  times: (0, import_i18n13.__)("Enable number", "elementor"),
+  loop: (0, import_i18n13.__)("Infinite repeat", "elementor")
+};
+function Repeat() {
+  const repeatContainerRef = (0, import_react15.useRef)(null);
+  const options = [
+    {
+      value: REPEAT_OPTIONS.times,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.times,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.Number123Icon, { fontSize: size }),
+      showTooltip: true
+    },
+    {
+      value: REPEAT_OPTIONS.loop,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.loop,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.RepeatIcon, { fontSize: size }),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React19.createElement(
+    PromotionOverlayLayout,
+    {
+      ref: repeatContainerRef,
+      promotionChip: /* @__PURE__ */ React19.createElement(
+        InteractionsPromotionChip,
+        {
+          content: (0, import_i18n13.__)("Upgrade to control how many times the animation repeats.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-repeat-modal/",
+          anchorRef: repeatContainerRef,
+          trackingData: TRACKING_DATA3
+        }
+      )
+    },
+    /* @__PURE__ */ React19.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange: () => {
+    }, value: "" })
+  );
+}
+
+// src/components/controls/replay.tsx
+var React20 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
+var import_icons5 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: (0, import_i18n13.__)("No", "elementor"),
-  yes: (0, import_i18n13.__)("Yes", "elementor")
+  no: (0, import_i18n14.__)("No", "elementor"),
+  yes: (0, import_i18n14.__)("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
-var OVERLAY_GRID = "1 / 1";
-var CHIP_OFFSET = "50%";
-function Replay({ onChange, anchorRef }) {
+function Replay({ onChange }) {
+  const replayContainerRef = (0, import_react16.useRef)(null);
   const options = [
     {
       value: false,
       disabled: false,
       label: REPLAY_OPTIONS.no,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
       label: REPLAY_OPTIONS.yes,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
-    InteractionsPromotionChip,
+  return /* @__PURE__ */ React20.createElement(
+    PromotionOverlayLayout,
     {
-      content: (0, import_i18n13.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
-      anchorRef,
-      trackingData: TRACKING_DATA3
-    }
-  )));
+      ref: replayContainerRef,
+      promotionChip: /* @__PURE__ */ React20.createElement(
+        InteractionsPromotionChip,
+        {
+          content: (0, import_i18n14.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
+          anchorRef: replayContainerRef,
+          trackingData: TRACKING_DATA4
+        }
+      )
+    },
+    /* @__PURE__ */ React20.createElement(import_editor_controls10.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })
+  );
 }
 
 // src/components/controls/trigger.tsx
-var React19 = __toESM(require("react"));
-var import_i18n14 = require("@wordpress/i18n");
-var TRACKING_DATA4 = { target_name: "interactions_trigger", location_l2: "interactions" };
+var React21 = __toESM(require("react"));
+var import_i18n15 = require("@wordpress/i18n");
+var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: (0, import_i18n14.__)("Page load", "elementor"),
-  scrollIn: (0, import_i18n14.__)("Scroll into view", "elementor"),
-  scrollOn: (0, import_i18n14.__)("While scrolling", "elementor"),
-  hover: (0, import_i18n14.__)("On hover", "elementor"),
-  click: (0, import_i18n14.__)("On click", "elementor")
+  load: (0, import_i18n15.__)("Page load", "elementor"),
+  scrollIn: (0, import_i18n15.__)("Scroll into view", "elementor"),
+  scrollOn: (0, import_i18n15.__)("While scrolling", "elementor"),
+  hover: (0, import_i18n15.__)("On hover", "elementor"),
+  click: (0, import_i18n15.__)("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1626,17 +1799,17 @@ function Trigger({ value, onChange }) {
   const disabledOptions = Object.fromEntries(
     Object.entries(TRIGGER_OPTIONS).filter(([key]) => !BASE_TRIGGERS.includes(key))
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     PromotionSelect,
     {
       value: value in baseOptions ? value : DEFAULT_VALUES.trigger,
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n14.__)("PRO triggers", "elementor"),
-      promotionContent: (0, import_i18n14.__)("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: (0, import_i18n15.__)("PRO triggers", "elementor"),
+      promotionContent: (0, import_i18n15.__)("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
-      trackingData: TRACKING_DATA4
+      trackingData: TRACKING_DATA5
     }
   );
 }
@@ -1679,12 +1852,6 @@ 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 import_utils = require("@elementor/utils");
 
@@ -1705,7 +1872,7 @@ var baseSchema = {
 var proSchema = {
   trigger: import_schema.z.enum(["load", "scrollIn", "scrollOut", "scrollOn", "hover", "click"]).optional().describe("Event that triggers the animation"),
   effect: import_schema.z.enum(["fade", "slide", "scale", "custom"]).optional().describe("Animation effect type"),
-  customEffect: import_schema.z.object({
+  customEffects: import_schema.z.object({
     keyframes: import_schema.z.array(
       import_schema.z.object({
         stop: import_schema.z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),
@@ -1764,6 +1931,69 @@ var initInteractionsSchemaResource = (reg) => {
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_schema3 = require("@elementor/schema");
 var import_utils2 = require("@elementor/utils");
+
+// src/mcp/constants.ts
+var MAX_INTERACTIONS_PER_ELEMENT = 5;
+var EDITOR_INTERACTIONS_MCP_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",
+		}`;
+
+// src/mcp/tools/manage-element-interaction-tool.ts
 var EMPTY_INTERACTIONS = {
   version: 1,
   items: []
@@ -1909,73 +2139,18 @@ var initManageElementInteractionTool = (reg) => {
 };
 
 // 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.
-		** 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);
-  });
+var initMcpInteractions = (reg) => {
+  const { setMCPDescription } = reg;
+  setMCPDescription(
+    `Everything related to V4 ( Atomic ) interactions.
+# Interactions
+- Create/update/delete interactions
+- Get list of interactions
+- Get details of an interaction
+`
+  );
+  initInteractionsSchemaResource(reg);
+  initManageElementInteractionTool(reg);
 };
 
 // src/init.ts
@@ -2014,7 +2189,11 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
-    initMcpInteractions();
+    registerInteractionsControl({
+      type: "repeat",
+      component: Repeat
+    });
+    initMcpInteractions((0, import_editor_mcp.getMCPByDomain)("interactions", { instructions: EDITOR_INTERACTIONS_MCP_INSTRUCTIONS }));
   } catch (error) {
     throw error;
   }
@@ -2030,6 +2209,8 @@ function init() {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
   buildDisplayLabel,