@elementor/editor-interactions 4.0.0-manual → 4.0.1

package/dist/index.mjs

@@ -26,8 +26,7 @@ var EmptyState = ({ onCreateInteraction }) => {
 
 // src/components/interactions-tab.tsx
 import * as React11 from "react";
-import { useCallback as useCallback6, useState as useState3 } from "react";
-import { useElementInteractions as useElementInteractions2 } from "@elementor/editor-elements";
+import { useCallback as useCallback6, useState as useState4 } from "react";
 import { SessionStorageProvider } from "@elementor/session";
 import { Stack as Stack3 } from "@elementor/ui";
 
@@ -36,84 +35,28 @@ import * as React2 from "react";
 import { createContext, useContext, useEffect } from "react";
 import {
   playElementInteractions,
-  updateElementInteractions,
-  useElementInteractions
+  updateElementInteractions
 } from "@elementor/editor-elements";
-var InteractionsContext = createContext(null);
-var DEFAULT_INTERACTIONS = {
-  version: 1,
-  items: []
-};
-var InteractionsProvider = ({ children, elementId }) => {
-  const rawInteractions = useElementInteractions(elementId);
-  useEffect(() => {
-    window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
-  }, []);
-  const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
-  const setInteractions = (value) => {
-    const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
-    updateElementInteractions({
-      elementId,
-      interactions: normalizedValue
-    });
-  };
-  const playInteractions = (interactionId) => {
-    playElementInteractions(elementId, interactionId);
-  };
-  const contextValue = {
-    interactions,
-    setInteractions,
-    playInteractions
-  };
-  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
-};
-var useInteractionsContext = () => {
-  const context = useContext(InteractionsContext);
-  if (!context) {
-    throw new Error("useInteractionsContext must be used within InteractionsProvider");
-  }
-  return context;
-};
 
-// src/contexts/popup-state-context.tsx
-import * as React3 from "react";
-import { createContext as createContext2, useCallback, useContext as useContext2, useState } from "react";
-var PopupStateContext = createContext2(void 0);
-var PopupStateProvider = ({ children }) => {
-  const [openByDefault, setOpenByDefault] = useState(false);
-  const triggerDefaultOpen = useCallback(() => {
-    setOpenByDefault(true);
-  }, []);
-  const resetDefaultOpen = useCallback(() => {
-    setOpenByDefault(false);
-  }, []);
-  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
-};
+// src/hooks/use-element-interactions.ts
+import { useState } from "react";
+import { getElementInteractions } from "@elementor/editor-elements";
+import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
-// 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 { Repeater } from "@elementor/editor-controls";
-import { InfoCircleFilledIcon, PlayerPlayIcon } from "@elementor/icons";
-import { Alert, AlertTitle, Box as Box2, IconButton, Tooltip } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
-
-// src/contexts/interactions-item-context.tsx
-import * as React4 from "react";
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var InteractionItemContext = createContext3(null);
-function InteractionItemContextProvider({
-  value,
-  children
+// src/interactions-controls-registry.ts
+var controlsRegistry = /* @__PURE__ */ new Map();
+function registerInteractionsControl({
+  type,
+  component,
+  options
 }) {
-  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+  controlsRegistry.set(type, { type, component, options });
 }
-function useInteractionItemContext() {
-  const context = useContext3(InteractionItemContext);
-  if (!context) {
-    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
-  }
-  return context;
+function getInteractionsControl(type) {
+  return controlsRegistry.get(type);
+}
+function getInteractionsControlOptions(type) {
+  return controlsRegistry.get(type)?.options ?? [];
 }
 
 // src/utils/prop-value-utils.ts
@@ -172,17 +115,134 @@ 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 ?? {};
+}
+
 // src/utils/temp-id-utils.ts
 var TEMP_ID_PREFIX = "temp-";
+var TEMP_ID_REGEX = /^temp-[a-z0-9]+$/i;
 function generateTempInteractionId() {
   return `${TEMP_ID_PREFIX}${Math.random().toString(36).substring(2, 11)}`;
 }
+function isTempId(id) {
+  return !!id && TEMP_ID_REGEX.test(id);
+}
 
 // src/utils/prop-value-utils.ts
 var createString = (value) => ({
   $$type: "string",
   value
 });
+var createNumber = (value) => ({
+  $$type: "number",
+  value
+});
 var createTimingConfig = (duration, delay) => ({
   $$type: "timing-config",
   value: {
@@ -197,7 +257,9 @@ var createBoolean = (value) => ({
 var createConfig = ({
   replay,
   easing = "easeIn",
-  relativeTo = "",
+  relativeTo = "viewport",
+  repeat = "",
+  times = 1,
   start = 85,
   end = 15
 }) => ({
@@ -206,6 +268,8 @@ var createConfig = ({
     replay: createBoolean(replay),
     easing: createString(easing),
     relativeTo: createString(relativeTo),
+    repeat: createString(repeat),
+    times: createNumber(times),
     start: createSize(start, "%"),
     end: createSize(end, "%")
   }
@@ -241,26 +305,33 @@ var createAnimationPreset = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
+  repeat,
+  times,
   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,
-      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,
@@ -272,6 +343,8 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
+  repeat,
+  times,
   start,
   end,
   excludedBreakpoints,
@@ -290,6 +363,8 @@ var createInteractionItem = ({
       replay,
       easing,
       relativeTo,
+      repeat,
+      times,
       start,
       end,
       customEffects
@@ -300,17 +375,22 @@ var createInteractionItem = ({
   }
 });
 var createDefaultInteractionItem = () => {
+  const { constants } = getInteractionsConfig();
   return createInteractionItem({
     trigger: "load",
     effect: "fade",
     type: "in",
-    duration: 600,
-    delay: 0,
+    duration: constants.defaultDuration,
+    delay: constants.defaultDelay,
     replay: false,
-    easing: "easeIn",
+    easing: constants.defaultEasing,
     interactionId: generateTempInteractionId()
   });
 };
+var createDefaultInteractions = () => ({
+  version: 1,
+  items: [createDefaultInteractionItem()]
+});
 var extractString = (prop, fallback = "") => {
   return prop?.value ?? fallback;
 };
@@ -335,10 +415,180 @@ var buildDisplayLabel = (item) => {
   const type = extractString(item.animation.value.type);
   const triggerLabel = TRIGGER_LABELS[trigger] || capitalize(trigger);
   const effectLabel = capitalize(effect);
-  const typeLabel = capitalize(type);
+  const typeLabel = "custom" === effect ? "" : capitalize(type);
   return `${triggerLabel}: ${effectLabel} ${typeLabel}`;
 };
 
+// src/utils/is-supported-interaction-item.ts
+function isSupportedInteractionItem(interaction) {
+  const value = interaction.value;
+  const replay = extractBoolean(value.animation.value.config?.value.replay);
+  if (true === replay) {
+    return hasSupport("replay", "yes");
+  }
+  const trigger = extractString(value.trigger);
+  const easing = extractString(value.animation.value.config?.value.easing);
+  const effect = extractString(value.animation.value.effect);
+  const checks = [
+    ["trigger", trigger],
+    ["easing", easing],
+    ["effect", effect]
+  ];
+  return checks.every(([controlType, controlValue]) => {
+    if (controlValue === "" || controlValue === null) {
+      return true;
+    }
+    return hasSupport(controlType, controlValue);
+  });
+}
+function hasSupport(controlType, controlValue) {
+  const supportedOptions = getInteractionsControlOptions(controlType);
+  if (1 > supportedOptions.length) {
+    return true;
+  }
+  return supportedOptions.includes(controlValue);
+}
+
+// src/utils/filter-interactions.ts
+var filterInteractions = (interactions) => {
+  return interactions.filter((interaction) => {
+    return isSupportedInteractionItem(interaction);
+  });
+};
+
+// src/hooks/use-element-interactions.ts
+var useElementInteractions = (elementId) => {
+  const [interactions, setInteractions] = useState(() => {
+    const initial = getElementInteractions(elementId);
+    const filteredInteractions = filterInteractions(initial?.items ?? []);
+    return { version: initial?.version ?? 1, items: filteredInteractions };
+  });
+  useListenTo(
+    windowEvent("elementor/element/update_interactions"),
+    () => {
+      const newInteractions = getElementInteractions(elementId);
+      const filteredInteractions = filterInteractions(newInteractions?.items ?? []);
+      setInteractions({ version: newInteractions?.version ?? 1, items: filteredInteractions });
+    },
+    [elementId]
+  );
+  return interactions;
+};
+
+// src/contexts/interactions-context.tsx
+var InteractionsContext = createContext(null);
+var DEFAULT_INTERACTIONS = {
+  version: 1,
+  items: []
+};
+var InteractionsProvider = ({ children, elementId }) => {
+  const rawInteractions = useElementInteractions(elementId);
+  useEffect(() => {
+    window.dispatchEvent(new CustomEvent("elementor/element/update_interactions"));
+  }, []);
+  const interactions = rawInteractions ?? DEFAULT_INTERACTIONS;
+  const setInteractions = (value) => {
+    const normalizedValue = value && value.items?.length === 0 ? void 0 : value;
+    updateElementInteractions({
+      elementId,
+      interactions: normalizedValue
+    });
+  };
+  const playInteractions = (interactionId) => {
+    playElementInteractions(elementId, interactionId);
+  };
+  const contextValue = {
+    elementId,
+    interactions,
+    setInteractions,
+    playInteractions
+  };
+  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
+};
+var useInteractionsContext = () => {
+  const context = useContext(InteractionsContext);
+  if (!context) {
+    throw new Error("useInteractionsContext must be used within InteractionsProvider");
+  }
+  return context;
+};
+
+// src/contexts/popup-state-context.tsx
+import * as React3 from "react";
+import { createContext as createContext2, useCallback, useContext as useContext2, useState as useState2 } from "react";
+var PopupStateContext = createContext2(void 0);
+var PopupStateProvider = ({ children }) => {
+  const [openByDefault, setOpenByDefault] = useState2(false);
+  const triggerDefaultOpen = useCallback(() => {
+    setOpenByDefault(true);
+  }, []);
+  const resetDefaultOpen = useCallback(() => {
+    setOpenByDefault(false);
+  }, []);
+  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
+};
+
+// src/utils/tracking.ts
+import { getElementLabel } from "@elementor/editor-elements";
+import { getMixpanel } from "@elementor/events";
+var TRIGGER_LABELS2 = {
+  load: "On page load",
+  scrollIn: "Scroll into view",
+  scrollOut: "Scroll out of view",
+  scrollOn: "While scrolling",
+  hover: "Hover",
+  click: "Click"
+};
+var capitalize2 = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+var trackInteractionCreated = (elementId, item) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.interactions?.created) {
+    return;
+  }
+  const trigger = extractString(item.value.trigger);
+  const effect = extractString(item.value.animation.value.effect);
+  const type = extractString(item.value.animation.value.type);
+  dispatchEvent?.(config.names.interactions.created, {
+    app_type: config?.appTypes?.editor,
+    window_name: config?.appTypes?.editor,
+    interaction_type: config?.triggers?.click,
+    target_name: getElementLabel(elementId),
+    interaction_result: "interaction_created",
+    target_location: config?.locations?.widgetPanel,
+    location_l1: getElementLabel(elementId),
+    location_l2: "interactions",
+    interaction_description: "interaction_created",
+    interaction_trigger: TRIGGER_LABELS2[trigger] ?? capitalize2(trigger),
+    interaction_effect: effect === "custom" ? capitalize2(effect) : `${capitalize2(effect)} ${capitalize2(type)}`
+  });
+};
+
+// src/components/interactions-list.tsx
+import * as React10 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, IconButton, Tooltip } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/contexts/interactions-item-context.tsx
+import * as React4 from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var InteractionItemContext = createContext3(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = useContext3(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/components/interactions-list-item.tsx
 import * as React9 from "react";
 import { useCallback as useCallback4 } from "react";
@@ -347,24 +597,11 @@ 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/interactions-controls-registry.ts
-var controlsRegistry = /* @__PURE__ */ new Map();
-function registerInteractionsControl({
-  type,
-  component,
-  options
-}) {
-  controlsRegistry.set(type, { type, component, options });
-}
-function getInteractionsControl(type) {
-  return controlsRegistry.get(type);
-}
-
 // src/utils/resolve-direction.ts
 var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection, currentEffect) => {
   if (newEffect === "slide" && !newDirection) {
@@ -457,6 +694,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
+  repeat: "",
+  times: 1,
   start: 85,
   end: 15
 };
@@ -469,6 +708,8 @@ var controlVisibilityConfig = {
   relativeTo: (values) => values.trigger === "scrollOn",
   start: (values) => values.trigger === "scrollOn",
   end: (values) => values.trigger === "scrollOn",
+  repeat: (values) => values.trigger !== "scrollOn",
+  times: (values) => values.trigger !== "scrollOn" && values.repeat === "times",
   duration: (values) => {
     const isRelativeToVisible = values.trigger === "scrollOn";
     return !isRelativeToVisible;
@@ -478,6 +719,13 @@ var controlVisibilityConfig = {
     return !isRelativeToVisible;
   }
 };
+function normalizeTimesValue(value, fallback) {
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return fallback;
+  }
+  return Math.max(1, Math.floor(numericValue));
+}
 function useControlComponent(controlName, isVisible = true) {
   return useMemo(() => {
     if (!isVisible) {
@@ -497,6 +745,9 @@ 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 configValue = interaction.animation.value.config?.value;
+  const repeat = extractString(configValue?.repeat, DEFAULT_VALUES.repeat);
+  const times = normalizeTimesValue(configValue?.times?.value, DEFAULT_VALUES.times);
   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 = {
@@ -509,6 +760,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
+    repeat,
+    times,
     start,
     end,
     customEffects
@@ -531,8 +784,15 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     controlVisibilityConfig.effectType(interactionValues)
   );
   const DirectionControl = useControlComponent("direction", controlVisibilityConfig.direction(interactionValues));
+  const RepeatControl = useControlComponent(
+    "repeat",
+    controlVisibilityConfig.repeat(interactionValues)
+  );
+  const TimesControl = useControlComponent(
+    "times",
+    controlVisibilityConfig.times(interactionValues)
+  );
   const EasingControl = useControlComponent("easing");
-  const containerRef = useRef2(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -554,6 +814,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         replay: updates.replay ?? replay,
         easing: updates.easing ?? easing,
         relativeTo: updates.relativeTo ?? relativeTo,
+        repeat: updates.repeat ?? repeat,
+        times: updates.times ?? times,
         start: updates.start ?? start,
         end: updates.end ?? end,
         customEffects: updates.customEffects ?? customEffects
@@ -565,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,
@@ -592,6 +847,14 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
+  )), RepeatControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Repeat", "elementor") }, /* @__PURE__ */ React7.createElement(RepeatControl, { value: repeat, onChange: (v) => updateInteraction({ repeat: v }) })), TimesControl && /* @__PURE__ */ React7.createElement(Field, { label: __2("Times", "elementor") }, /* @__PURE__ */ React7.createElement(
+    TimesControl,
+    {
+      value: times,
+      onChange: (v) => updateInteraction({
+        times: normalizeTimesValue(v, DEFAULT_VALUES.times)
+      })
+    }
   )), controlVisibilityConfig.duration(interactionValues) && /* @__PURE__ */ React7.createElement(Field, { label: __2("Duration", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
@@ -632,12 +895,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
 import * as React8 from "react";
-import { useCallback as useCallback3, useMemo as useMemo2, useState as useState2 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState3 } from "react";
 import { ControlFormLabel as ControlFormLabel2, PopoverContent as PopoverContent2 } from "@elementor/editor-controls";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { Autocomplete, Chip, Grid as Grid3, Stack as Stack2, TextField } from "@elementor/ui";
@@ -649,7 +912,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
     () => breakpoints.map((breakpoint) => ({ label: breakpoint.label, value: String(breakpoint.id) })),
     [breakpoints]
   );
-  const [selectedBreakpoints, setSelectedBreakpoints] = useState2(() => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = useState3(() => {
     const excluded = extractExcludedBreakpoints(interaction.breakpoints).filter((excludedBreakpoint) => {
       return availableBreakpoints.some(({ value }) => value === excludedBreakpoint);
     });
@@ -746,7 +1009,8 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = useRef3(false);
+  const { elementId } = useInteractionsContext();
+  const hasInitializedRef = useRef2(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
@@ -766,18 +1030,24 @@ 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;
   const handleRepeaterChange = useCallback5(
-    (newItems) => {
+    (newItems, _, meta) => {
       handleUpdateInteractions({
         ...interactions,
         items: newItems
       });
+      if (meta?.action?.type === "add") {
+        const addedItem = meta.action.payload[0]?.item;
+        if (addedItem) {
+          trackInteractionCreated(elementId, addedItem);
+        }
+      }
     },
-    [interactions, handleUpdateInteractions]
+    [interactions, handleUpdateInteractions, elementId]
   );
   const handleInteractionChange = useCallback5(
     (index, newInteractionValue) => {
@@ -837,14 +1107,15 @@ var InteractionsTab = ({ elementId }) => {
   return /* @__PURE__ */ React11.createElement(PopupStateProvider, null, /* @__PURE__ */ React11.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
-  const existingInteractions = useElementInteractions2(elementId);
-  const firstInteractionState = useState3(false);
+  const existingInteractions = useElementInteractions(elementId);
+  const firstInteractionState = useState4(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
   return /* @__PURE__ */ React11.createElement(SessionStorageProvider, { prefix: elementId }, hasInteractions ? /* @__PURE__ */ React11.createElement(InteractionsProvider, { elementId }, /* @__PURE__ */ React11.createElement(InteractionsContent, { firstInteractionState })) : /* @__PURE__ */ React11.createElement(
     EmptyState,
     {
       onCreateInteraction: () => {
         firstInteractionState[1](true);
+        trackInteractionCreated(elementId, createDefaultInteractionItem());
       }
     }
   ));
@@ -875,20 +1146,6 @@ function InteractionsContent({
   ));
 }
 
-// src/utils/get-interactions-config.ts
-var DEFAULT_CONFIG = {
-  constants: {
-    defaultDuration: 300,
-    defaultDelay: 0,
-    slideDistance: 100,
-    scaleStart: 0.5,
-    easing: "linear"
-  }
-};
-function getInteractionsConfig() {
-  return window.ElementorInteractionsConfig || DEFAULT_CONFIG;
-}
-
 // src/utils/create-interactions-repository.ts
 var createInteractionsRepository = () => {
   const providers = [];
@@ -949,8 +1206,8 @@ function createInteractionsProvider({
 }
 
 // src/providers/document-elements-interactions-provider.ts
-import { getCurrentDocumentId, getElementInteractions, getElements } from "@elementor/editor-elements";
-import { __privateListenTo as listenTo, windowEvent } from "@elementor/editor-v1-adapters";
+import { getCurrentDocumentId, getElementInteractions as getElementInteractions2, getElements } from "@elementor/editor-elements";
+import { __privateListenTo as listenTo, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
   key: () => {
@@ -964,20 +1221,20 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   },
   priority: 50,
   subscribe: (cb) => {
-    return listenTo([windowEvent("elementor/element/update_interactions")], () => cb());
+    return listenTo([windowEvent2("elementor/element/update_interactions")], () => cb());
   },
   actions: {
     all: () => {
       const elements = getElements();
       const filtered = elements.filter((element) => {
-        const interactions = getElementInteractions(element.id);
+        const interactions = getElementInteractions2(element.id);
         if (!interactions) {
           return false;
         }
         return interactions?.items?.length > 0;
       });
       return filtered.map((element) => {
-        const interactions = getElementInteractions(element.id);
+        const interactions = getElementInteractions2(element.id);
         return {
           elementId: element.id,
           dataId: element.id,
@@ -988,37 +1245,148 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/init.ts
+import { getMCPByDomain } from "@elementor/editor-mcp";
+
+// src/commands/paste-interactions.ts
+import {
+  getContainer,
+  getElementInteractions as getElementInteractions3,
+  getElementLabel as getElementLabel2,
+  getWidgetsCache,
+  updateElementInteractions as updateElementInteractions2
+} from "@elementor/editor-elements";
+import {
+  __privateListenTo as listenTo2,
+  commandStartEvent,
+  undoable
+} from "@elementor/editor-v1-adapters";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/commands/get-clipboard-elements.ts
+function getClipboardElements(storageKey = "clipboard") {
+  try {
+    const storedData = JSON.parse(localStorage.getItem("elementor") ?? "{}");
+    return storedData[storageKey]?.elements;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/commands/paste-interactions.ts
+function isAtomicContainer(container) {
+  const type = container?.model.get("widgetType") || container?.model.get("elType");
+  const widgetsCache = getWidgetsCache();
+  const elementConfig = widgetsCache?.[type];
+  return Boolean(elementConfig?.atomic_props_schema);
+}
+function getTitleForContainers(containers) {
+  return containers.length > 1 ? __6("Elements", "elementor") : getElementLabel2(containers[0].id);
+}
+function normalizeClipboardInteractions(raw) {
+  if (!raw) {
+    return null;
+  }
+  const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+  if (!parsed?.items?.length) {
+    return null;
+  }
+  return { version: parsed.version ?? 1, items: parsed.items };
+}
+function regenerateInteractionIds(interactions) {
+  const cloned = structuredClone(interactions);
+  cloned.items?.forEach((item) => {
+    if (item.$$type === "interaction-item" && item.value) {
+      item.value.interaction_id = createString(generateTempInteractionId());
+    }
+  });
+  return cloned;
+}
+function initPasteInteractionsCommand() {
+  const undoablePasteInteractions = undoable(
+    {
+      do: ({ containers, newInteractions }) => {
+        const pasted = regenerateInteractionIds(newInteractions);
+        return containers.map((container) => {
+          const elementId = container.id;
+          const previous = getElementInteractions3(elementId);
+          updateElementInteractions2({
+            elementId,
+            interactions: pasted
+          });
+          return { elementId, previous: previous ?? { version: 1, items: [] } };
+        });
+      },
+      undo: (_, revertData) => {
+        revertData.forEach(({ elementId, previous }) => {
+          updateElementInteractions2({
+            elementId,
+            interactions: previous.items?.length ? previous : void 0
+          });
+        });
+      }
+    },
+    {
+      title: ({ containers }) => getTitleForContainers(containers),
+      subtitle: __6("Interactions Pasted", "elementor")
+    }
+  );
+  listenTo2(commandStartEvent("document/elements/paste-interactions"), (e) => {
+    const args = e.args;
+    const containers = args.containers ?? (args.container ? [args.container] : []);
+    const storageKey = args.storageKey ?? "clipboard";
+    if (!containers.length) {
+      return;
+    }
+    const clipboardElements = getClipboardElements(storageKey);
+    const [clipboardElement] = clipboardElements ?? [];
+    if (!clipboardElement) {
+      return;
+    }
+    const newInteractions = normalizeClipboardInteractions(clipboardElement.interactions);
+    if (!newInteractions) {
+      return;
+    }
+    const existingContainers = containers.filter((c) => getContainer(c.id));
+    const validContainers = existingContainers.filter(isAtomicContainer);
+    if (!validContainers.length) {
+      return;
+    }
+    undoablePasteInteractions({ containers: validContainers, newInteractions });
+  });
+}
+
 // src/components/controls/direction.tsx
 import * as React12 from "react";
 import { useMemo as useMemo4 } from "react";
 import { ToggleButtonGroupUi } from "@elementor/editor-controls";
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from "@elementor/icons";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 function Direction({ value, onChange, interactionType }) {
   const options = useMemo4(() => {
     const isIn = interactionType === "in";
     return [
       {
         value: "top",
-        label: isIn ? __6("From top", "elementor") : __6("To top", "elementor"),
+        label: isIn ? __7("From top", "elementor") : __7("To top", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
-        label: interactionType === "in" ? __6("From bottom", "elementor") : __6("To bottom", "elementor"),
+        label: interactionType === "in" ? __7("From bottom", "elementor") : __7("To bottom", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
-        label: interactionType === "in" ? __6("From left", "elementor") : __6("To left", "elementor"),
+        label: interactionType === "in" ? __7("From left", "elementor") : __7("To left", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
-        label: interactionType === "in" ? __6("From right", "elementor") : __6("To right", "elementor"),
+        label: interactionType === "in" ? __7("From right", "elementor") : __7("To right", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
@@ -1029,27 +1397,35 @@ function Direction({ value, onChange, interactionType }) {
 
 // src/components/controls/easing.tsx
 import * as React15 from "react";
-import { __ as __9 } from "@wordpress/i18n";
+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 __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 
 // src/ui/interactions-promotion-chip.tsx
 import * as React13 from "react";
-import { forwardRef, useImperativeHandle, useState as useState4 } 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 { __ as __7 } from "@wordpress/i18n";
+import { Box as Box2 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 var InteractionsPromotionChip = forwardRef(
-  ({ content, upgradeUrl, anchorRef }, ref) => {
-    const [isOpen, setIsOpen] = useState4(false);
+  ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
+    const [isOpen, setIsOpen] = useState5(false);
     useCanvasClickHandler(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    useImperativeHandle(ref, () => ({ toggle }), []);
+    const toggle = useCallback7(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          trackViewPromotion(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    useImperativeHandle(ref, () => ({ toggle }), [toggle]);
     const handleToggle = (e) => {
       e.stopPropagation();
       toggle();
@@ -1058,19 +1434,20 @@ var InteractionsPromotionChip = forwardRef(
       PromotionPopover,
       {
         open: isOpen,
-        title: __7("Interactions", "elementor"),
+        title: __8("Interactions", "elementor"),
         content,
-        ctaText: __7("Upgrade now", "elementor"),
+        ctaText: __8("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         anchorRef,
         placement: anchorRef ? "right-start" : void 0,
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
-        Box3,
+        Box2,
         {
           onMouseDown: (e) => e.stopPropagation(),
           onClick: handleToggle,
@@ -1081,7 +1458,6 @@ var InteractionsPromotionChip = forwardRef(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1091,10 +1467,11 @@ function PromotionSelect({
   disabledOptions,
   promotionLabel,
   promotionContent,
-  upgradeUrl
+  upgradeUrl,
+  trackingData
 }) {
-  const promotionRef = useRef4(null);
-  const anchorRef = useRef4(null);
+  const promotionRef = useRef3(null);
+  const anchorRef = useRef3(null);
   return /* @__PURE__ */ React14.createElement(
     Select,
     {
@@ -1122,14 +1499,15 @@ function PromotionSelect({
           promotionRef.current?.toggle();
         }
       },
-      promotionLabel ?? __8("PRO features", "elementor"),
+      promotionLabel ?? __9("PRO features", "elementor"),
       /* @__PURE__ */ React14.createElement(
         InteractionsPromotionChip,
         {
           content: promotionContent,
           upgradeUrl,
           ref: promotionRef,
-          anchorRef
+          anchorRef,
+          trackingData
         }
       )
     ),
@@ -1138,14 +1516,15 @@ function PromotionSelect({
 }
 
 // src/components/controls/easing.tsx
+var TRACKING_DATA = { target_name: "interactions_easing", location_l2: "interactions" };
 var EASING_OPTIONS = {
-  easeIn: __9("Ease In", "elementor"),
-  easeInOut: __9("Ease In Out", "elementor"),
-  easeOut: __9("Ease Out", "elementor"),
-  backIn: __9("Back In", "elementor"),
-  backInOut: __9("Back In Out", "elementor"),
-  backOut: __9("Back Out", "elementor"),
-  linear: __9("Linear", "elementor")
+  easeIn: __10("Ease In", "elementor"),
+  easeInOut: __10("Ease In Out", "elementor"),
+  easeOut: __10("Ease Out", "elementor"),
+  backIn: __10("Back In", "elementor"),
+  backInOut: __10("Back In Out", "elementor"),
+  backOut: __10("Back Out", "elementor"),
+  linear: __10("Linear", "elementor")
 };
 var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
@@ -1161,20 +1540,22 @@ function Easing({}) {
       value: DEFAULT_VALUES.easing,
       baseOptions,
       disabledOptions,
-      promotionContent: __9("Upgrade to control the smoothness of the interaction.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
+      promotionContent: __10("Upgrade to control the smoothness of the interaction.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/",
+      trackingData: TRACKING_DATA
     }
   );
 }
 
 // src/components/controls/effect.tsx
 import * as React16 from "react";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
+var TRACKING_DATA2 = { target_name: "interactions_effect", location_l2: "interactions" };
 var EFFECT_OPTIONS = {
-  fade: __10("Fade", "elementor"),
-  slide: __10("Slide", "elementor"),
-  scale: __10("Scale", "elementor"),
-  custom: __10("Custom", "elementor")
+  fade: __11("Fade", "elementor"),
+  slide: __11("Slide", "elementor"),
+  scale: __11("Scale", "elementor"),
+  custom: __11("Custom", "elementor")
 };
 var BASE_EFFECTS = ["fade", "slide", "scale"];
 function Effect({ value, onChange }) {
@@ -1191,12 +1572,13 @@ function Effect({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: __10("PRO effects", "elementor"),
-      promotionContent: __10(
+      promotionLabel: __11("PRO effects", "elementor"),
+      promotionContent: __11(
         "Upgrade to further customize your animation with opacity, scale, move, rotate and more.",
         "elementor"
       ),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-custom-effect-modal/"
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-custom-effect-modal/",
+      trackingData: TRACKING_DATA2
     }
   );
 }
@@ -1204,74 +1586,147 @@ function Effect({ value, onChange }) {
 // src/components/controls/effect-type.tsx
 import * as React17 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi2 } from "@elementor/editor-controls";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: __11("In", "elementor"),
-      renderContent: () => __11("In", "elementor"),
+      label: __12("In", "elementor"),
+      renderContent: () => __12("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: __11("Out", "elementor"),
-      renderContent: () => __11("Out", "elementor"),
+      label: __12("Out", "elementor"),
+      renderContent: () => __12("Out", "elementor"),
       showTooltip: true
     }
   ];
   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 { Number123Icon, RepeatIcon } from "@elementor/icons";
+import { __ as __13 } from "@wordpress/i18n";
+
+// 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 { Box as Box4 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: __12("No", "elementor"),
-  yes: __12("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: __12("Upgrade to run the animation every time its trigger occurs.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
-      anchorRef
-    }
-  )));
+      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 __13 } from "@wordpress/i18n";
+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: __13("Page load", "elementor"),
-  scrollIn: __13("Scroll into view", "elementor"),
-  scrollOn: __13("While scrolling", "elementor"),
-  hover: __13("On hover", "elementor"),
-  click: __13("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 }) {
@@ -1281,22 +1736,23 @@ 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: __13("PRO triggers", "elementor"),
-      promotionContent: __13("Upgrade to unlock more interactions triggers.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
+      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_DATA5
     }
   );
 }
 
 // src/hooks/on-duplicate.ts
-import { getAllDescendants, getContainer } from "@elementor/editor-elements";
+import { getAllDescendants, getContainer as getContainer2 } from "@elementor/editor-elements";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 function initCleanInteractionIdsOnDuplicate() {
   registerDataHook("after", "document/elements/duplicate", (_args, result) => {
@@ -1307,7 +1763,7 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1316,7 +1772,7 @@ function cleanInteractionIdsRecursive(elementId) {
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1333,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";
 
@@ -1359,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"),
@@ -1415,13 +1865,77 @@ var initInteractionsSchemaResource = (reg) => {
 };
 
 // src/mcp/tools/manage-element-interaction-tool.ts
-import { updateElementInteractions as updateElementInteractions2 } from "@elementor/editor-elements";
+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: []
 };
+var EFFECTS_WITHOUT_TYPE = ["custom"];
 var initManageElementInteractionTool = (reg) => {
   const { addTool } = reg;
   const extendedSchema = isProActive2() ? { ...baseSchema, ...proSchema } : baseSchema;
@@ -1448,16 +1962,36 @@ var initManageElementInteractionTool = (reg) => {
     },
     handler: (input) => {
       const { elementId, action, interactionId, ...animationData } = input;
+      const { effectType, ...restAnimationData } = animationData;
+      const effect = restAnimationData.effect;
+      const resolvedType = effectType ?? (effect && !EFFECTS_WITHOUT_TYPE.includes(effect) ? "in" : void 0);
       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 {
           success: true,
           elementId,
           action,
-          interactions: currentInteractions.items,
-          count: currentInteractions.items.length
+          interactions: summary,
+          count: summary.length
         };
       }
       let updatedItems = [...currentInteractions.items];
@@ -1470,7 +2004,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const newItem = createInteractionItem({
             interactionId: generateTempInteractionId(),
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [...updatedItems, newItem];
           break;
@@ -1489,7 +2024,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const updatedItem = createInteractionItem({
             interactionId,
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [
             ...updatedItems.slice(0, itemIndex),
@@ -1523,7 +2059,7 @@ var initManageElementInteractionTool = (reg) => {
         items: updatedItems
       };
       try {
-        updateElementInteractions2({ elementId, interactions: updatedInteractions });
+        updateElementInteractions3({ elementId, interactions: updatedInteractions });
       } catch (error) {
         throw new Error(
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
@@ -1540,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
@@ -1614,6 +2095,7 @@ function init() {
   try {
     interactionsRepository.register(documentElementsInteractionsProvider);
     initCleanInteractionIdsOnDuplicate();
+    initPasteInteractionsCommand();
     registerInteractionsControl({
       type: "trigger",
       component: Trigger,
@@ -1627,7 +2109,7 @@ function init() {
     registerInteractionsControl({
       type: "replay",
       component: Replay,
-      options: ["true", "false"]
+      options: ["no"]
     });
     registerInteractionsControl({
       type: "effectType",
@@ -1644,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;
   }
@@ -1659,12 +2145,37 @@ export {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState,
   InteractionsTab,
+  REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS,
   REPLAY_OPTIONS,
   TRIGGER_OPTIONS,
+  buildDisplayLabel,
+  convertTimeUnit,
+  createAnimationPreset,
+  createBoolean,
+  createConfig,
+  createDefaultInteractionItem,
+  createDefaultInteractions,
+  createExcludedBreakpoints,
+  createInteractionBreakpoints,
+  createInteractionItem,
   createInteractionsProvider,
+  createNumber,
+  createString,
+  createTimingConfig,
+  extractBoolean,
+  extractExcludedBreakpoints,
+  extractSize,
+  extractString,
+  formatSizeValue,
+  generateTempInteractionId,
   getInteractionsConfig,
   init,
   interactionsRepository,
-  registerInteractionsControl
+  isTempId,
+  parseSizeValue,
+  registerInteractionsControl,
+  resolveDirection,
+  useElementInteractions
 };
 //# sourceMappingURL=index.mjs.map