@elementor/editor-interactions 4.0.0-683 → 4.0.0

package/dist/index.mjs

@@ -115,6 +115,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 ?? {};
@@ -153,7 +257,7 @@ var createBoolean = (value) => ({
 var createConfig = ({
   replay,
   easing = "easeIn",
-  relativeTo = "",
+  relativeTo = "viewport",
   repeat = "",
   times = 1,
   start = 85,
@@ -206,25 +310,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,
@@ -458,10 +565,10 @@ var trackInteractionCreated = (elementId, item) => {
 
 // src/components/interactions-list.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
 import { Repeater } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
+import { Alert, AlertTitle, Box, IconButton, Tooltip } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
 // src/contexts/interactions-item-context.tsx
@@ -490,9 +597,9 @@ import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/interaction-details.tsx
 import * as React7 from "react";
-import { useMemo, useRef as useRef2 } from "react";
+import { useMemo } from "react";
 import { PopoverContent } from "@elementor/editor-controls";
-import { Box, Divider, Grid as Grid2 } from "@elementor/ui";
+import { Divider, Grid as Grid2 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
 
 // src/utils/resolve-direction.ts
@@ -686,7 +793,6 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.times(interactionValues)
   );
   const EasingControl = useControlComponent("easing");
-  const containerRef = useRef2(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -721,19 +827,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
-    TriggerControl,
-    {
-      value: trigger,
-      onChange: (v) => updateInteraction({ trigger: v })
-    }
-  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true,
-      anchorRef: containerRef
+      disabled: true
     }
   ))), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(Grid2, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
@@ -796,7 +895,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
@@ -911,7 +1010,7 @@ var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
   const { elementId } = useInteractionsContext();
-  const hasInitializedRef = useRef3(false);
+  const hasInitializedRef = useRef2(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -931,7 +1030,7 @@ function InteractionsList(props) {
   const isMaxNumberOfInteractionsReached = useMemo3(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
-  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __5("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box2, { component: "span" }, __5(
+  const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(AlertTitle, null, __5("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(Box, { component: "span" }, __5(
     "You've reached the limit of 5 interactions for this element. Please remove an interaction before creating a new one.",
     "elementor"
   ))) : void 0;
@@ -1146,6 +1245,9 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/init.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
+
 // src/commands/paste-interactions.ts
 import {
   getContainer,
@@ -1299,7 +1401,7 @@ import { __ as __10 } from "@wordpress/i18n";
 
 // src/ui/promotion-select.tsx
 import * as React14 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef3 } from "react";
 import { MenuListItem } from "@elementor/editor-ui";
 import { MenuSubheader, Select } from "@elementor/ui";
 import { __ as __9 } from "@wordpress/i18n";
@@ -1309,7 +1411,7 @@ import * as React13 from "react";
 import { forwardRef, useCallback as useCallback7, useImperativeHandle, useState as useState5 } from "react";
 import { trackUpgradePromotionClick, trackViewPromotion } from "@elementor/editor-controls";
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
-import { Box as Box3 } from "@elementor/ui";
+import { Box as Box2 } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
 var InteractionsPromotionChip = forwardRef(
   ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
@@ -1345,7 +1447,7 @@ var InteractionsPromotionChip = forwardRef(
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
-        Box3,
+        Box2,
         {
           onMouseDown: (e) => e.stopPropagation(),
           onClick: handleToggle,
@@ -1356,7 +1458,6 @@ var InteractionsPromotionChip = forwardRef(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1369,8 +1470,8 @@ function PromotionSelect({
   upgradeUrl,
   trackingData
 }) {
-  const promotionRef = useRef4(null);
-  const anchorRef = useRef4(null);
+  const promotionRef = useRef3(null);
+  const anchorRef = useRef3(null);
   return /* @__PURE__ */ React14.createElement(
     Select,
     {
@@ -1504,58 +1605,128 @@ function EffectType({ value, onChange }) {
   return /* @__PURE__ */ React17.createElement(ToggleButtonGroupUi2, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/replay.tsx
-import * as React18 from "react";
+// src/components/controls/repeat.tsx
+import * as React19 from "react";
+import { useRef as useRef4 } from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } from "@elementor/editor-controls";
-import { CheckIcon, MinusIcon } from "@elementor/icons";
-import { Box as Box4 } from "@elementor/ui";
+import { Number123Icon, RepeatIcon } from "@elementor/icons";
 import { __ as __13 } from "@wordpress/i18n";
-var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
+
+// src/ui/promotion-overlay-layout.tsx
+import * as React18 from "react";
+import { forwardRef as forwardRef2 } from "react";
+import { Box as Box3 } from "@elementor/ui";
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+var PromotionOverlayLayout = forwardRef2(
+  ({ children, promotionChip }, ref) => /* @__PURE__ */ React18.createElement(Box3, { ref, sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box3, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ React18.createElement(Box3, { 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: __13("times", "elementor"),
+  loop: __13("loop", "elementor")
+};
+var REPEAT_TOOLTIPS = {
+  times: __13("Enable number", "elementor"),
+  loop: __13("Infinite repeat", "elementor")
+};
+function Repeat() {
+  const repeatContainerRef = useRef4(null);
+  const options = [
+    {
+      value: REPEAT_OPTIONS.times,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.times,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(Number123Icon, { fontSize: size }),
+      showTooltip: true
+    },
+    {
+      value: REPEAT_OPTIONS.loop,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.loop,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(RepeatIcon, { fontSize: size }),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React19.createElement(
+    PromotionOverlayLayout,
+    {
+      ref: repeatContainerRef,
+      promotionChip: /* @__PURE__ */ React19.createElement(
+        InteractionsPromotionChip,
+        {
+          content: __13("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(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange: () => {
+    }, value: "" })
+  );
+}
+
+// src/components/controls/replay.tsx
+import * as React20 from "react";
+import { useRef as useRef5 } from "react";
+import { ToggleButtonGroupUi as ToggleButtonGroupUi4 } from "@elementor/editor-controls";
+import { CheckIcon, MinusIcon } from "@elementor/icons";
+import { __ as __14 } from "@wordpress/i18n";
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: __13("No", "elementor"),
-  yes: __13("Yes", "elementor")
+  no: __14("No", "elementor"),
+  yes: __14("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
-var OVERLAY_GRID = "1 / 1";
-var CHIP_OFFSET = "50%";
-function Replay({ onChange, anchorRef }) {
+function Replay({ onChange }) {
+  const replayContainerRef = useRef5(null);
   const options = [
     {
       value: false,
       disabled: false,
       label: REPLAY_OPTIONS.no,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(MinusIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
       label: REPLAY_OPTIONS.yes,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(CheckIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(Box4, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(ToggleButtonGroupUi3, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(Box4, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
-    InteractionsPromotionChip,
+  return /* @__PURE__ */ React20.createElement(
+    PromotionOverlayLayout,
     {
-      content: __13("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: __14("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(ToggleButtonGroupUi4, { items: options, exclusive: true, onChange, value: false })
+  );
 }
 
 // src/components/controls/trigger.tsx
-import * as React19 from "react";
-import { __ as __14 } from "@wordpress/i18n";
-var TRACKING_DATA4 = { target_name: "interactions_trigger", location_l2: "interactions" };
+import * as React21 from "react";
+import { __ as __15 } from "@wordpress/i18n";
+var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: __14("Page load", "elementor"),
-  scrollIn: __14("Scroll into view", "elementor"),
-  scrollOn: __14("While scrolling", "elementor"),
-  hover: __14("On hover", "elementor"),
-  click: __14("On click", "elementor")
+  load: __15("Page load", "elementor"),
+  scrollIn: __15("Scroll into view", "elementor"),
+  scrollOn: __15("While scrolling", "elementor"),
+  hover: __15("On hover", "elementor"),
+  click: __15("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1565,17 +1736,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: __14("PRO triggers", "elementor"),
-      promotionContent: __14("Upgrade to unlock more interactions triggers.", "elementor"),
+      promotionLabel: __15("PRO triggers", "elementor"),
+      promotionContent: __15("Upgrade to unlock more interactions triggers.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
-      trackingData: TRACKING_DATA4
+      trackingData: TRACKING_DATA5
     }
   );
 }
@@ -1618,12 +1789,6 @@ function cleanInteractionIds(elementId) {
   container.model.set("interactions", updatedInteractions);
 }
 
-// src/mcp/index.ts
-import { getMCPByDomain } from "@elementor/editor-mcp";
-
-// src/mcp/constants.ts
-var MAX_INTERACTIONS_PER_ELEMENT = 5;
-
 // src/mcp/resources/interactions-schema-resource.ts
 import { isProActive } from "@elementor/utils";
 
@@ -1644,7 +1809,7 @@ var baseSchema = {
 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({
+  customEffects: z.object({
     keyframes: z.array(
       z.object({
         stop: z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),
@@ -1703,6 +1868,69 @@ var initInteractionsSchemaResource = (reg) => {
 import { updateElementInteractions as updateElementInteractions3 } from "@elementor/editor-elements";
 import { z as z2 } from "@elementor/schema";
 import { isProActive as isProActive2 } from "@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: []
@@ -1848,73 +2076,18 @@ var initManageElementInteractionTool = (reg) => {
 };
 
 // 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.
-		** 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
@@ -1953,7 +2126,11 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
-    initMcpInteractions();
+    registerInteractionsControl({
+      type: "repeat",
+      component: Repeat
+    });
+    initMcpInteractions(getMCPByDomain("interactions", { instructions: EDITOR_INTERACTIONS_MCP_INSTRUCTIONS }));
   } catch (error) {
     throw error;
   }
@@ -1968,6 +2145,8 @@ export {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
   buildDisplayLabel,