@elementor/editor-interactions 4.0.0-manual → 4.0.1

package/dist/index.js

@@ -39,13 +39,38 @@ __export(index_exports, {
   ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX: () => ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX,
   EmptyState: () => EmptyState,
   InteractionsTab: () => InteractionsTab,
+  REPEAT_OPTIONS: () => REPEAT_OPTIONS,
+  REPEAT_TOOLTIPS: () => REPEAT_TOOLTIPS,
   REPLAY_OPTIONS: () => REPLAY_OPTIONS,
   TRIGGER_OPTIONS: () => TRIGGER_OPTIONS,
+  buildDisplayLabel: () => buildDisplayLabel,
+  convertTimeUnit: () => convertTimeUnit,
+  createAnimationPreset: () => createAnimationPreset,
+  createBoolean: () => createBoolean,
+  createConfig: () => createConfig,
+  createDefaultInteractionItem: () => createDefaultInteractionItem,
+  createDefaultInteractions: () => createDefaultInteractions,
+  createExcludedBreakpoints: () => createExcludedBreakpoints,
+  createInteractionBreakpoints: () => createInteractionBreakpoints,
+  createInteractionItem: () => createInteractionItem,
   createInteractionsProvider: () => createInteractionsProvider,
+  createNumber: () => createNumber,
+  createString: () => createString,
+  createTimingConfig: () => createTimingConfig,
+  extractBoolean: () => extractBoolean,
+  extractExcludedBreakpoints: () => extractExcludedBreakpoints,
+  extractSize: () => extractSize,
+  extractString: () => extractString,
+  formatSizeValue: () => formatSizeValue,
+  generateTempInteractionId: () => generateTempInteractionId,
   getInteractionsConfig: () => getInteractionsConfig,
   init: () => init,
   interactionsRepository: () => interactionsRepository,
-  registerInteractionsControl: () => registerInteractionsControl
+  isTempId: () => isTempId,
+  parseSizeValue: () => parseSizeValue,
+  registerInteractionsControl: () => registerInteractionsControl,
+  resolveDirection: () => resolveDirection,
+  useElementInteractions: () => useElementInteractions
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -77,90 +102,34 @@ var EmptyState = ({ onCreateInteraction }) => {
 
 // src/components/interactions-tab.tsx
 var React11 = __toESM(require("react"));
-var import_react9 = require("react");
-var import_editor_elements2 = require("@elementor/editor-elements");
+var import_react10 = require("react");
 var import_session = require("@elementor/session");
 var import_ui7 = require("@elementor/ui");
 
 // src/contexts/interactions-context.tsx
 var React2 = __toESM(require("react"));
-var import_react = require("react");
-var import_editor_elements = require("@elementor/editor-elements");
-var InteractionsContext = (0, import_react.createContext)(null);
-var DEFAULT_INTERACTIONS = {
-  version: 1,
-  items: []
-};
-var InteractionsProvider = ({ children, elementId }) => {
-  const rawInteractions = (0, import_editor_elements.useElementInteractions)(elementId);
-  (0, import_react.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;
-    (0, import_editor_elements.updateElementInteractions)({
-      elementId,
-      interactions: normalizedValue
-    });
-  };
-  const playInteractions = (interactionId) => {
-    (0, import_editor_elements.playElementInteractions)(elementId, interactionId);
-  };
-  const contextValue = {
-    interactions,
-    setInteractions,
-    playInteractions
-  };
-  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
-};
-var useInteractionsContext = () => {
-  const context = (0, import_react.useContext)(InteractionsContext);
-  if (!context) {
-    throw new Error("useInteractionsContext must be used within InteractionsProvider");
-  }
-  return context;
-};
-
-// src/contexts/popup-state-context.tsx
-var React3 = __toESM(require("react"));
 var import_react2 = require("react");
-var PopupStateContext = (0, import_react2.createContext)(void 0);
-var PopupStateProvider = ({ children }) => {
-  const [openByDefault, setOpenByDefault] = (0, import_react2.useState)(false);
-  const triggerDefaultOpen = (0, import_react2.useCallback)(() => {
-    setOpenByDefault(true);
-  }, []);
-  const resetDefaultOpen = (0, import_react2.useCallback)(() => {
-    setOpenByDefault(false);
-  }, []);
-  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
-};
+var import_editor_elements2 = require("@elementor/editor-elements");
 
-// src/components/interactions-list.tsx
-var React10 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
-var import_icons2 = require("@elementor/icons");
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+// src/hooks/use-element-interactions.ts
+var import_react = require("react");
+var import_editor_elements = require("@elementor/editor-elements");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
-// src/contexts/interactions-item-context.tsx
-var React4 = __toESM(require("react"));
-var import_react3 = require("react");
-var InteractionItemContext = (0, import_react3.createContext)(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 = (0, import_react3.useContext)(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
@@ -219,17 +188,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: {
@@ -244,7 +330,9 @@ var createBoolean = (value) => ({
 var createConfig = ({
   replay,
   easing = "easeIn",
-  relativeTo = "",
+  relativeTo = "viewport",
+  repeat = "",
+  times = 1,
   start = 85,
   end = 15
 }) => ({
@@ -253,6 +341,8 @@ var createConfig = ({
     replay: createBoolean(replay),
     easing: createString(easing),
     relativeTo: createString(relativeTo),
+    repeat: createString(repeat),
+    times: createNumber(times),
     start: createSize(start, "%"),
     end: createSize(end, "%")
   }
@@ -288,26 +378,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,
@@ -319,6 +416,8 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
+  repeat,
+  times,
   start,
   end,
   excludedBreakpoints,
@@ -337,6 +436,8 @@ var createInteractionItem = ({
       replay,
       easing,
       relativeTo,
+      repeat,
+      times,
       start,
       end,
       customEffects
@@ -347,17 +448,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;
 };
@@ -382,36 +488,193 @@ 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] = (0, import_react.useState)(() => {
+    const initial = (0, import_editor_elements.getElementInteractions)(elementId);
+    const filteredInteractions = filterInteractions(initial?.items ?? []);
+    return { version: initial?.version ?? 1, items: filteredInteractions };
+  });
+  (0, import_editor_v1_adapters.__privateUseListenTo)(
+    (0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions"),
+    () => {
+      const newInteractions = (0, import_editor_elements.getElementInteractions)(elementId);
+      const filteredInteractions = filterInteractions(newInteractions?.items ?? []);
+      setInteractions({ version: newInteractions?.version ?? 1, items: filteredInteractions });
+    },
+    [elementId]
+  );
+  return interactions;
+};
+
+// src/contexts/interactions-context.tsx
+var InteractionsContext = (0, import_react2.createContext)(null);
+var DEFAULT_INTERACTIONS = {
+  version: 1,
+  items: []
+};
+var InteractionsProvider = ({ children, elementId }) => {
+  const rawInteractions = useElementInteractions(elementId);
+  (0, import_react2.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;
+    (0, import_editor_elements2.updateElementInteractions)({
+      elementId,
+      interactions: normalizedValue
+    });
+  };
+  const playInteractions = (interactionId) => {
+    (0, import_editor_elements2.playElementInteractions)(elementId, interactionId);
+  };
+  const contextValue = {
+    elementId,
+    interactions,
+    setInteractions,
+    playInteractions
+  };
+  return /* @__PURE__ */ React2.createElement(InteractionsContext.Provider, { value: contextValue }, children);
+};
+var useInteractionsContext = () => {
+  const context = (0, import_react2.useContext)(InteractionsContext);
+  if (!context) {
+    throw new Error("useInteractionsContext must be used within InteractionsProvider");
+  }
+  return context;
+};
+
+// src/contexts/popup-state-context.tsx
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
+var PopupStateContext = (0, import_react3.createContext)(void 0);
+var PopupStateProvider = ({ children }) => {
+  const [openByDefault, setOpenByDefault] = (0, import_react3.useState)(false);
+  const triggerDefaultOpen = (0, import_react3.useCallback)(() => {
+    setOpenByDefault(true);
+  }, []);
+  const resetDefaultOpen = (0, import_react3.useCallback)(() => {
+    setOpenByDefault(false);
+  }, []);
+  return /* @__PURE__ */ React3.createElement(PopupStateContext.Provider, { value: { openByDefault, triggerDefaultOpen, resetDefaultOpen } }, children);
+};
+
+// src/utils/tracking.ts
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_events = require("@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 } = (0, import_events.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: (0, import_editor_elements3.getElementLabel)(elementId),
+    interaction_result: "interaction_created",
+    target_location: config?.locations?.widgetPanel,
+    location_l1: (0, import_editor_elements3.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
+var React10 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_controls5 = require("@elementor/editor-controls");
+var import_icons2 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/contexts/interactions-item-context.tsx
+var React4 = __toESM(require("react"));
+var import_react4 = require("react");
+var InteractionItemContext = (0, import_react4.createContext)(null);
+function InteractionItemContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ React4.createElement(InteractionItemContext.Provider, { value }, children);
+}
+function useInteractionItemContext() {
+  const context = (0, import_react4.useContext)(InteractionItemContext);
+  if (!context) {
+    throw new Error("useInteractionItemContext must be used within InteractionItemContextProvider");
+  }
+  return context;
+}
+
 // src/components/interactions-list-item.tsx
 var React9 = __toESM(require("react"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_ui5 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/interaction-details.tsx
 var React7 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_editor_controls3 = require("@elementor/editor-controls");
 var import_ui3 = require("@elementor/ui");
 var import_i18n2 = require("@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) {
@@ -428,7 +691,7 @@ var resolveDirection = (hasDirection, newEffect, newDirection, currentDirection,
 
 // src/components/controls/time-frame-indicator.tsx
 var React5 = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_editor_controls = require("@elementor/editor-controls");
 
 // src/utils/time-conversion.ts
@@ -447,8 +710,8 @@ function TimeFrameIndicator({
   defaultValue
 }) {
   const sizeValue = parseSizeValue(value, TIME_UNITS, defaultValue, DEFAULT_TIME_UNIT);
-  const prevUnitRef = (0, import_react4.useRef)(sizeValue.unit);
-  const setValue = (0, import_react4.useCallback)(
+  const prevUnitRef = (0, import_react5.useRef)(sizeValue.unit);
+  const setValue = (0, import_react5.useCallback)(
     (size) => {
       const unitChanged = prevUnitRef.current !== size.unit;
       if (unitChanged) {
@@ -504,6 +767,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
+  repeat: "",
+  times: 1,
   start: 85,
   end: 15
 };
@@ -516,6 +781,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;
@@ -525,8 +792,15 @@ 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 (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     if (!isVisible) {
       return null;
     }
@@ -544,6 +818,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 = {
@@ -556,6 +833,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
+    repeat,
+    times,
     start,
     end,
     customEffects
@@ -578,8 +857,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 = (0, import_react5.useRef)(null);
   const updateInteraction = (updates) => {
     const resolvedDirectionValue = resolveDirection(
       "direction" in updates,
@@ -601,6 +887,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
@@ -612,19 +900,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onPlayInteraction(interactionId);
     }, 0);
   };
-  return /* @__PURE__ */ React7.createElement(import_ui3.Box, { ref: containerRef }, /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(
-    TriggerControl,
-    {
-      value: trigger,
-      onChange: (v) => updateInteraction({ trigger: v })
-    }
-  )), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_controls3.PopoverContent, { p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, TriggerControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Trigger", "elementor") }, /* @__PURE__ */ React7.createElement(TriggerControl, { value: trigger, onChange: (v) => updateInteraction({ trigger: v }) })), ReplayControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Replay", "elementor") }, /* @__PURE__ */ React7.createElement(
     ReplayControl,
     {
       value: replay,
       onChange: (v) => updateInteraction({ replay: v }),
-      disabled: true,
-      anchorRef: containerRef
+      disabled: true
     }
   ))), /* @__PURE__ */ React7.createElement(import_ui3.Divider, null), /* @__PURE__ */ React7.createElement(import_ui3.Grid, { container: true, spacing: 1.5 }, EffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Effect", "elementor") }, /* @__PURE__ */ React7.createElement(EffectControl, { value: effect, onChange: (v) => updateInteraction({ effect: v }) })), CustomEffectControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Custom Effect", "elementor") }, /* @__PURE__ */ React7.createElement(
     CustomEffectControl,
@@ -639,6 +920,14 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
       onChange: (v) => updateInteraction({ direction: v }),
       interactionType: type
     }
+  )), RepeatControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("Repeat", "elementor") }, /* @__PURE__ */ React7.createElement(RepeatControl, { value: repeat, onChange: (v) => updateInteraction({ repeat: v }) })), TimesControl && /* @__PURE__ */ React7.createElement(Field, { label: (0, import_i18n2.__)("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: (0, import_i18n2.__)("Duration", "elementor") }, /* @__PURE__ */ React7.createElement(
     TimeFrameIndicator,
     {
@@ -679,12 +968,12 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
         updateInteraction({ easing: v });
       }
     }
-  )))));
+  ))));
 };
 
 // src/components/interaction-settings.tsx
 var React8 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_ui4 = require("@elementor/ui");
@@ -692,11 +981,11 @@ var import_i18n3 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var InteractionSettings = ({ interaction, onChange }) => {
   const breakpoints = (0, import_editor_responsive.useBreakpoints)();
-  const availableBreakpoints = (0, import_react6.useMemo)(
+  const availableBreakpoints = (0, import_react7.useMemo)(
     () => breakpoints.map((breakpoint) => ({ label: breakpoint.label, value: String(breakpoint.id) })),
     [breakpoints]
   );
-  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react6.useState)(() => {
+  const [selectedBreakpoints, setSelectedBreakpoints] = (0, import_react7.useState)(() => {
     const excluded = extractExcludedBreakpoints(interaction.breakpoints).filter((excludedBreakpoint) => {
       return availableBreakpoints.some(({ value }) => value === excludedBreakpoint);
     });
@@ -704,7 +993,7 @@ var InteractionSettings = ({ interaction, onChange }) => {
       return !excluded.includes(value);
     });
   });
-  const handleBreakpointChange = (0, import_react6.useCallback)(
+  const handleBreakpointChange = (0, import_react7.useCallback)(
     (_, newValue) => {
       setSelectedBreakpoints(newValue);
       const selectedValues = newValue.map((option) => option.value);
@@ -748,13 +1037,13 @@ var InteractionsListItem = ({
 }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui5.useTabs)("details");
   const context = useInteractionItemContext();
-  const handleChange = (0, import_react7.useCallback)(
+  const handleChange = (0, import_react8.useCallback)(
     (newInteractionValue) => {
       context?.onInteractionChange(index, newInteractionValue);
     },
     [context, index]
   );
-  const handlePlayInteraction = (0, import_react7.useCallback)(
+  const handlePlayInteraction = (0, import_react8.useCallback)(
     (interactionId2) => {
       context?.onPlayInteraction(interactionId2);
     },
@@ -793,14 +1082,15 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
-  const hasInitializedRef = (0, import_react8.useRef)(false);
-  const handleUpdateInteractions = (0, import_react8.useCallback)(
+  const { elementId } = useInteractionsContext();
+  const hasInitializedRef = (0, import_react9.useRef)(false);
+  const handleUpdateInteractions = (0, import_react9.useCallback)(
     (newInteractions) => {
       onSelectInteractions(newInteractions);
     },
     [onSelectInteractions]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (triggerCreateOnShowEmpty && !hasInitializedRef.current && (!interactions.items || interactions.items?.length === 0)) {
       hasInitializedRef.current = true;
       const newState = {
@@ -810,23 +1100,29 @@ function InteractionsList(props) {
       handleUpdateInteractions(newState);
     }
   }, [triggerCreateOnShowEmpty, interactions.items, handleUpdateInteractions]);
-  const isMaxNumberOfInteractionsReached = (0, import_react8.useMemo)(() => {
+  const isMaxNumberOfInteractionsReached = (0, import_react9.useMemo)(() => {
     return interactions.items?.length >= MAX_NUMBER_OF_INTERACTIONS;
   }, [interactions.items?.length]);
   const infotipContent = isMaxNumberOfInteractionsReached ? /* @__PURE__ */ React10.createElement(import_ui6.Alert, { color: "secondary", icon: /* @__PURE__ */ React10.createElement(import_icons2.InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React10.createElement(import_ui6.AlertTitle, null, (0, import_i18n5.__)("Interactions", "elementor")), /* @__PURE__ */ React10.createElement(import_ui6.Box, { component: "span" }, (0, import_i18n5.__)(
     "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 = (0, import_react8.useCallback)(
-    (newItems) => {
+  const handleRepeaterChange = (0, import_react9.useCallback)(
+    (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 = (0, import_react8.useCallback)(
+  const handleInteractionChange = (0, import_react9.useCallback)(
     (index, newInteractionValue) => {
       const newItems = structuredClone(interactions.items);
       newItems[index] = {
@@ -840,7 +1136,7 @@ function InteractionsList(props) {
     },
     [interactions, handleUpdateInteractions]
   );
-  const contextValue = (0, import_react8.useMemo)(
+  const contextValue = (0, import_react9.useMemo)(
     () => ({
       onInteractionChange: handleInteractionChange,
       onPlayInteraction
@@ -884,14 +1180,15 @@ var InteractionsTab = ({ elementId }) => {
   return /* @__PURE__ */ React11.createElement(PopupStateProvider, null, /* @__PURE__ */ React11.createElement(InteractionsTabContent, { elementId }));
 };
 function InteractionsTabContent({ elementId }) {
-  const existingInteractions = (0, import_editor_elements2.useElementInteractions)(elementId);
-  const firstInteractionState = (0, import_react9.useState)(false);
+  const existingInteractions = useElementInteractions(elementId);
+  const firstInteractionState = (0, import_react10.useState)(false);
   const hasInteractions = existingInteractions?.items?.length || firstInteractionState[0];
   return /* @__PURE__ */ React11.createElement(import_session.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());
       }
     }
   ));
@@ -900,7 +1197,7 @@ function InteractionsContent({
   firstInteractionState
 }) {
   const { interactions, setInteractions, playInteractions } = useInteractionsContext();
-  const applyInteraction = (0, import_react9.useCallback)(
+  const applyInteraction = (0, import_react10.useCallback)(
     (newInteractions) => {
       firstInteractionState[1](false);
       if (!newInteractions) {
@@ -922,20 +1219,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 = [];
@@ -996,12 +1279,12 @@ function createInteractionsProvider({
 }
 
 // src/providers/document-elements-interactions-provider.ts
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX = "document-elements-interactions-";
 var documentElementsInteractionsProvider = createInteractionsProvider({
   key: () => {
-    const documentId = (0, import_editor_elements3.getCurrentDocumentId)();
+    const documentId = (0, import_editor_elements4.getCurrentDocumentId)();
     if (!documentId) {
       const pendingKey = `${ELEMENTS_INTERACTIONS_PROVIDER_KEY_PREFIX}pending`;
       return pendingKey;
@@ -1011,20 +1294,20 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   },
   priority: 50,
   subscribe: (cb) => {
-    return (0, import_editor_v1_adapters.__privateListenTo)([(0, import_editor_v1_adapters.windowEvent)("elementor/element/update_interactions")], () => cb());
+    return (0, import_editor_v1_adapters2.__privateListenTo)([(0, import_editor_v1_adapters2.windowEvent)("elementor/element/update_interactions")], () => cb());
   },
   actions: {
     all: () => {
-      const elements = (0, import_editor_elements3.getElements)();
+      const elements = (0, import_editor_elements4.getElements)();
       const filtered = elements.filter((element) => {
-        const interactions = (0, import_editor_elements3.getElementInteractions)(element.id);
+        const interactions = (0, import_editor_elements4.getElementInteractions)(element.id);
         if (!interactions) {
           return false;
         }
         return interactions?.items?.length > 0;
       });
       return filtered.map((element) => {
-        const interactions = (0, import_editor_elements3.getElementInteractions)(element.id);
+        const interactions = (0, import_editor_elements4.getElementInteractions)(element.id);
         return {
           elementId: element.id,
           dataId: element.id,
@@ -1035,37 +1318,138 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// src/init.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+
+// src/commands/paste-interactions.ts
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_i18n6 = require("@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 = (0, import_editor_elements5.getWidgetsCache)();
+  const elementConfig = widgetsCache?.[type];
+  return Boolean(elementConfig?.atomic_props_schema);
+}
+function getTitleForContainers(containers) {
+  return containers.length > 1 ? (0, import_i18n6.__)("Elements", "elementor") : (0, import_editor_elements5.getElementLabel)(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 = (0, import_editor_v1_adapters3.undoable)(
+    {
+      do: ({ containers, newInteractions }) => {
+        const pasted = regenerateInteractionIds(newInteractions);
+        return containers.map((container) => {
+          const elementId = container.id;
+          const previous = (0, import_editor_elements5.getElementInteractions)(elementId);
+          (0, import_editor_elements5.updateElementInteractions)({
+            elementId,
+            interactions: pasted
+          });
+          return { elementId, previous: previous ?? { version: 1, items: [] } };
+        });
+      },
+      undo: (_, revertData) => {
+        revertData.forEach(({ elementId, previous }) => {
+          (0, import_editor_elements5.updateElementInteractions)({
+            elementId,
+            interactions: previous.items?.length ? previous : void 0
+          });
+        });
+      }
+    },
+    {
+      title: ({ containers }) => getTitleForContainers(containers),
+      subtitle: (0, import_i18n6.__)("Interactions Pasted", "elementor")
+    }
+  );
+  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.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) => (0, import_editor_elements5.getContainer)(c.id));
+    const validContainers = existingContainers.filter(isAtomicContainer);
+    if (!validContainers.length) {
+      return;
+    }
+    undoablePasteInteractions({ containers: validContainers, newInteractions });
+  });
+}
+
 // src/components/controls/direction.tsx
 var React12 = __toESM(require("react"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons3 = require("@elementor/icons");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 function Direction({ value, onChange, interactionType }) {
-  const options = (0, import_react10.useMemo)(() => {
+  const options = (0, import_react11.useMemo)(() => {
     const isIn = interactionType === "in";
     return [
       {
         value: "top",
-        label: isIn ? (0, import_i18n6.__)("From top", "elementor") : (0, import_i18n6.__)("To top", "elementor"),
+        label: isIn ? (0, import_i18n7.__)("From top", "elementor") : (0, import_i18n7.__)("To top", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "bottom",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From bottom", "elementor") : (0, import_i18n6.__)("To bottom", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From bottom", "elementor") : (0, import_i18n7.__)("To bottom", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowUpSmallIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowDownSmallIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "left",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From left", "elementor") : (0, import_i18n6.__)("To left", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From left", "elementor") : (0, import_i18n7.__)("To left", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }),
         showTooltip: true
       },
       {
         value: "right",
-        label: interactionType === "in" ? (0, import_i18n6.__)("From right", "elementor") : (0, import_i18n6.__)("To right", "elementor"),
+        label: interactionType === "in" ? (0, import_i18n7.__)("From right", "elementor") : (0, import_i18n7.__)("To right", "elementor"),
         renderContent: ({ size }) => isIn ? /* @__PURE__ */ React12.createElement(import_icons3.ArrowLeftIcon, { fontSize: size }) : /* @__PURE__ */ React12.createElement(import_icons3.ArrowRightIcon, { fontSize: size }),
         showTooltip: true
       }
@@ -1076,27 +1460,35 @@ function Direction({ value, onChange, interactionType }) {
 
 // src/components/controls/easing.tsx
 var React15 = __toESM(require("react"));
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/ui/promotion-select.tsx
 var React14 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui9 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/ui/interactions-promotion-chip.tsx
 var React13 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
-var InteractionsPromotionChip = (0, import_react11.forwardRef)(
-  ({ content, upgradeUrl, anchorRef }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+var import_i18n8 = require("@wordpress/i18n");
+var InteractionsPromotionChip = (0, import_react12.forwardRef)(
+  ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
     (0, import_editor_ui.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react11.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const toggle = (0, import_react12.useCallback)(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          (0, import_editor_controls7.trackViewPromotion)(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    (0, import_react12.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     const handleToggle = (e) => {
       e.stopPropagation();
       toggle();
@@ -1105,16 +1497,17 @@ var InteractionsPromotionChip = (0, import_react11.forwardRef)(
       import_editor_ui.PromotionPopover,
       {
         open: isOpen,
-        title: (0, import_i18n7.__)("Interactions", "elementor"),
+        title: (0, import_i18n8.__)("Interactions", "elementor"),
         content,
-        ctaText: (0, import_i18n7.__)("Upgrade now", "elementor"),
+        ctaText: (0, import_i18n8.__)("Upgrade now", "elementor"),
         ctaUrl: upgradeUrl,
         anchorRef,
         placement: anchorRef ? "right-start" : void 0,
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => (0, import_editor_controls7.trackUpgradePromotionClick)(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
         import_ui8.Box,
@@ -1128,7 +1521,6 @@ var InteractionsPromotionChip = (0, import_react11.forwardRef)(
     );
   }
 );
-InteractionsPromotionChip.displayName = "InteractionsPromotionChip";
 
 // src/ui/promotion-select.tsx
 function PromotionSelect({
@@ -1138,10 +1530,11 @@ function PromotionSelect({
   disabledOptions,
   promotionLabel,
   promotionContent,
-  upgradeUrl
+  upgradeUrl,
+  trackingData
 }) {
-  const promotionRef = (0, import_react12.useRef)(null);
-  const anchorRef = (0, import_react12.useRef)(null);
+  const promotionRef = (0, import_react13.useRef)(null);
+  const anchorRef = (0, import_react13.useRef)(null);
   return /* @__PURE__ */ React14.createElement(
     import_ui9.Select,
     {
@@ -1169,14 +1562,15 @@ function PromotionSelect({
           promotionRef.current?.toggle();
         }
       },
-      promotionLabel ?? (0, import_i18n8.__)("PRO features", "elementor"),
+      promotionLabel ?? (0, import_i18n9.__)("PRO features", "elementor"),
       /* @__PURE__ */ React14.createElement(
         InteractionsPromotionChip,
         {
           content: promotionContent,
           upgradeUrl,
           ref: promotionRef,
-          anchorRef
+          anchorRef,
+          trackingData
         }
       )
     ),
@@ -1185,14 +1579,15 @@ function PromotionSelect({
 }
 
 // src/components/controls/easing.tsx
+var TRACKING_DATA = { target_name: "interactions_easing", location_l2: "interactions" };
 var EASING_OPTIONS = {
-  easeIn: (0, import_i18n9.__)("Ease In", "elementor"),
-  easeInOut: (0, import_i18n9.__)("Ease In Out", "elementor"),
-  easeOut: (0, import_i18n9.__)("Ease Out", "elementor"),
-  backIn: (0, import_i18n9.__)("Back In", "elementor"),
-  backInOut: (0, import_i18n9.__)("Back In Out", "elementor"),
-  backOut: (0, import_i18n9.__)("Back Out", "elementor"),
-  linear: (0, import_i18n9.__)("Linear", "elementor")
+  easeIn: (0, import_i18n10.__)("Ease In", "elementor"),
+  easeInOut: (0, import_i18n10.__)("Ease In Out", "elementor"),
+  easeOut: (0, import_i18n10.__)("Ease Out", "elementor"),
+  backIn: (0, import_i18n10.__)("Back In", "elementor"),
+  backInOut: (0, import_i18n10.__)("Back In Out", "elementor"),
+  backOut: (0, import_i18n10.__)("Back Out", "elementor"),
+  linear: (0, import_i18n10.__)("Linear", "elementor")
 };
 var BASE_EASINGS = ["easeIn"];
 function Easing({}) {
@@ -1208,20 +1603,22 @@ function Easing({}) {
       value: DEFAULT_VALUES.easing,
       baseOptions,
       disabledOptions,
-      promotionContent: (0, import_i18n9.__)("Upgrade to control the smoothness of the interaction.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
+      promotionContent: (0, import_i18n10.__)("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
 var React16 = __toESM(require("react"));
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
+var TRACKING_DATA2 = { target_name: "interactions_effect", location_l2: "interactions" };
 var EFFECT_OPTIONS = {
-  fade: (0, import_i18n10.__)("Fade", "elementor"),
-  slide: (0, import_i18n10.__)("Slide", "elementor"),
-  scale: (0, import_i18n10.__)("Scale", "elementor"),
-  custom: (0, import_i18n10.__)("Custom", "elementor")
+  fade: (0, import_i18n11.__)("Fade", "elementor"),
+  slide: (0, import_i18n11.__)("Slide", "elementor"),
+  scale: (0, import_i18n11.__)("Scale", "elementor"),
+  custom: (0, import_i18n11.__)("Custom", "elementor")
 };
 var BASE_EFFECTS = ["fade", "slide", "scale"];
 function Effect({ value, onChange }) {
@@ -1238,87 +1635,161 @@ function Effect({ value, onChange }) {
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n10.__)("PRO effects", "elementor"),
-      promotionContent: (0, import_i18n10.__)(
+      promotionLabel: (0, import_i18n11.__)("PRO effects", "elementor"),
+      promotionContent: (0, import_i18n11.__)(
         "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
     }
   );
 }
 
 // src/components/controls/effect-type.tsx
 var React17 = __toESM(require("react"));
-var import_editor_controls7 = require("@elementor/editor-controls");
-var import_i18n11 = require("@wordpress/i18n");
+var import_editor_controls8 = require("@elementor/editor-controls");
+var import_i18n12 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
   const options = [
     {
       value: "in",
-      label: (0, import_i18n11.__)("In", "elementor"),
-      renderContent: () => (0, import_i18n11.__)("In", "elementor"),
+      label: (0, import_i18n12.__)("In", "elementor"),
+      renderContent: () => (0, import_i18n12.__)("In", "elementor"),
       showTooltip: true
     },
     {
       value: "out",
-      label: (0, import_i18n11.__)("Out", "elementor"),
-      renderContent: () => (0, import_i18n11.__)("Out", "elementor"),
+      label: (0, import_i18n12.__)("Out", "elementor"),
+      renderContent: () => (0, import_i18n12.__)("Out", "elementor"),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React17.createElement(import_editor_controls7.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
-// src/components/controls/replay.tsx
-var React18 = __toESM(require("react"));
-var import_editor_controls8 = require("@elementor/editor-controls");
+// src/components/controls/repeat.tsx
+var React19 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
+var import_i18n13 = require("@wordpress/i18n");
+
+// src/ui/promotion-overlay-layout.tsx
+var React18 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_ui10 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var OVERLAY_GRID = "1 / 1";
+var CHIP_OFFSET = "50%";
+var PromotionOverlayLayout = (0, import_react14.forwardRef)(
+  ({ children, promotionChip }, ref) => /* @__PURE__ */ React18.createElement(import_ui10.Box, { ref, sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, children), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, promotionChip))
+);
+
+// src/components/controls/repeat.tsx
+var TRACKING_DATA3 = { target_name: "interactions_repeat", location_l2: "interactions" };
+var REPEAT_OPTIONS = {
+  times: (0, import_i18n13.__)("times", "elementor"),
+  loop: (0, import_i18n13.__)("loop", "elementor")
+};
+var REPEAT_TOOLTIPS = {
+  times: (0, import_i18n13.__)("Enable number", "elementor"),
+  loop: (0, import_i18n13.__)("Infinite repeat", "elementor")
+};
+function Repeat() {
+  const repeatContainerRef = (0, import_react15.useRef)(null);
+  const options = [
+    {
+      value: REPEAT_OPTIONS.times,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.times,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.Number123Icon, { fontSize: size }),
+      showTooltip: true
+    },
+    {
+      value: REPEAT_OPTIONS.loop,
+      disabled: true,
+      label: REPEAT_TOOLTIPS.loop,
+      renderContent: ({ size }) => /* @__PURE__ */ React19.createElement(import_icons4.RepeatIcon, { fontSize: size }),
+      showTooltip: true
+    }
+  ];
+  return /* @__PURE__ */ React19.createElement(
+    PromotionOverlayLayout,
+    {
+      ref: repeatContainerRef,
+      promotionChip: /* @__PURE__ */ React19.createElement(
+        InteractionsPromotionChip,
+        {
+          content: (0, import_i18n13.__)("Upgrade to control how many times the animation repeats.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-repeat-modal/",
+          anchorRef: repeatContainerRef,
+          trackingData: TRACKING_DATA3
+        }
+      )
+    },
+    /* @__PURE__ */ React19.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange: () => {
+    }, value: "" })
+  );
+}
+
+// src/components/controls/replay.tsx
+var React20 = __toESM(require("react"));
+var import_react16 = require("react");
+var import_editor_controls10 = require("@elementor/editor-controls");
+var import_icons5 = require("@elementor/icons");
+var import_i18n14 = require("@wordpress/i18n");
+var TRACKING_DATA4 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: (0, import_i18n12.__)("No", "elementor"),
-  yes: (0, import_i18n12.__)("Yes", "elementor")
+  no: (0, import_i18n14.__)("No", "elementor"),
+  yes: (0, import_i18n14.__)("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
-var OVERLAY_GRID = "1 / 1";
-var CHIP_OFFSET = "50%";
-function Replay({ onChange, anchorRef }) {
+function Replay({ onChange }) {
+  const replayContainerRef = (0, import_react16.useRef)(null);
   const options = [
     {
       value: false,
       disabled: false,
       label: REPLAY_OPTIONS.no,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.MinusIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.MinusIcon, { fontSize: size }),
       showTooltip: true
     },
     {
       value: true,
       disabled: true,
       label: REPLAY_OPTIONS.yes,
-      renderContent: ({ size }) => /* @__PURE__ */ React18.createElement(import_icons4.CheckIcon, { fontSize: size }),
+      renderContent: ({ size }) => /* @__PURE__ */ React20.createElement(import_icons5.CheckIcon, { fontSize: size }),
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
-    InteractionsPromotionChip,
+  return /* @__PURE__ */ React20.createElement(
+    PromotionOverlayLayout,
     {
-      content: (0, import_i18n12.__)("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: (0, import_i18n14.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+          upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
+          anchorRef: replayContainerRef,
+          trackingData: TRACKING_DATA4
+        }
+      )
+    },
+    /* @__PURE__ */ React20.createElement(import_editor_controls10.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })
+  );
 }
 
 // src/components/controls/trigger.tsx
-var React19 = __toESM(require("react"));
-var import_i18n13 = require("@wordpress/i18n");
+var React21 = __toESM(require("react"));
+var import_i18n15 = require("@wordpress/i18n");
+var TRACKING_DATA5 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
-  load: (0, import_i18n13.__)("Page load", "elementor"),
-  scrollIn: (0, import_i18n13.__)("Scroll into view", "elementor"),
-  scrollOn: (0, import_i18n13.__)("While scrolling", "elementor"),
-  hover: (0, import_i18n13.__)("On hover", "elementor"),
-  click: (0, import_i18n13.__)("On click", "elementor")
+  load: (0, import_i18n15.__)("Page load", "elementor"),
+  scrollIn: (0, import_i18n15.__)("Scroll into view", "elementor"),
+  scrollOn: (0, import_i18n15.__)("While scrolling", "elementor"),
+  hover: (0, import_i18n15.__)("On hover", "elementor"),
+  click: (0, import_i18n15.__)("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1328,25 +1799,26 @@ function Trigger({ value, onChange }) {
   const disabledOptions = Object.fromEntries(
     Object.entries(TRIGGER_OPTIONS).filter(([key]) => !BASE_TRIGGERS.includes(key))
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     PromotionSelect,
     {
       value: value in baseOptions ? value : DEFAULT_VALUES.trigger,
       onChange,
       baseOptions,
       disabledOptions,
-      promotionLabel: (0, import_i18n13.__)("PRO triggers", "elementor"),
-      promotionContent: (0, import_i18n13.__)("Upgrade to unlock more interactions triggers.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
+      promotionLabel: (0, import_i18n15.__)("PRO triggers", "elementor"),
+      promotionContent: (0, import_i18n15.__)("Upgrade to unlock more interactions triggers.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
+      trackingData: TRACKING_DATA5
     }
   );
 }
 
 // src/hooks/on-duplicate.ts
-var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function initCleanInteractionIdsOnDuplicate() {
-  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
+  (0, import_editor_v1_adapters4.registerDataHook)("after", "document/elements/duplicate", (_args, result) => {
     const containers = Array.isArray(result) ? result : [result];
     containers.forEach((container) => {
       cleanInteractionIdsRecursive(container.id);
@@ -1354,16 +1826,16 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = (0, import_editor_elements4.getContainer)(elementId);
+  const container = (0, import_editor_elements6.getContainer)(elementId);
   if (!container) {
     return;
   }
-  (0, import_editor_elements4.getAllDescendants)(container).forEach((element) => {
+  (0, import_editor_elements6.getAllDescendants)(container).forEach((element) => {
     cleanInteractionIds(element.id);
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = (0, import_editor_elements4.getContainer)(elementId);
+  const container = (0, import_editor_elements6.getContainer)(elementId);
   if (!container) {
     return;
   }
@@ -1380,12 +1852,6 @@ function cleanInteractionIds(elementId) {
   container.model.set("interactions", updatedInteractions);
 }
 
-// src/mcp/index.ts
-var import_editor_mcp = require("@elementor/editor-mcp");
-
-// src/mcp/constants.ts
-var MAX_INTERACTIONS_PER_ELEMENT = 5;
-
 // src/mcp/resources/interactions-schema-resource.ts
 var import_utils = require("@elementor/utils");
 
@@ -1406,7 +1872,7 @@ var baseSchema = {
 var proSchema = {
   trigger: import_schema.z.enum(["load", "scrollIn", "scrollOut", "scrollOn", "hover", "click"]).optional().describe("Event that triggers the animation"),
   effect: import_schema.z.enum(["fade", "slide", "scale", "custom"]).optional().describe("Animation effect type"),
-  customEffect: import_schema.z.object({
+  customEffects: import_schema.z.object({
     keyframes: import_schema.z.array(
       import_schema.z.object({
         stop: import_schema.z.number().describe("The stop of the keyframe in percent, can be either 0 or 100"),
@@ -1462,13 +1928,77 @@ var initInteractionsSchemaResource = (reg) => {
 };
 
 // src/mcp/tools/manage-element-interaction-tool.ts
-var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_elements7 = require("@elementor/editor-elements");
 var import_schema3 = require("@elementor/schema");
 var import_utils2 = require("@elementor/utils");
+
+// src/mcp/constants.ts
+var MAX_INTERACTIONS_PER_ELEMENT = 5;
+var EDITOR_INTERACTIONS_MCP_INSTRUCTIONS = `MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.
+		** IMPORTANT **
+		Use the "interactions-schema" resource to get the schema of the interactions.
+		Actions:
+		- get: Read the current interactions on the element.
+		- add: Add a new interaction (max ${MAX_INTERACTIONS_PER_ELEMENT} per element).
+		- update: Update an existing interaction by its interactionId.
+		- delete: Remove a specific interaction by its interactionId.
+		- clear: Remove all interactions from the element.
+		
+		For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.
+		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
+		Example Get Request:
+		{
+			"elementId": "123",
+			"action": "get",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Add Request:
+		{
+			"elementId": "123",
+			"action": "add",
+			"animationData": {
+				"effectType": "in",
+				"direction": "top",
+				"trigger": "click",
+				"effect": "fade",
+				"duration": 1000,
+				"delay": 0,
+				"easing": "easeIn",
+				"excludedBreakpoints": ["mobile", "tablet"],
+			}
+		}
+		Example Update Request:
+		{
+			"elementId": "123",
+			"action": "update",
+			"interactionId": "123",
+			"animationData": {
+				"trigger": "click",
+				"effect": "fade",
+			}
+		}
+		Example Delete Request:
+		{
+			"elementId": "123",
+			"action": "delete",
+			"interactionId": "123",
+		}
+		Example Clear Request:
+		{
+			"elementId": "123",
+			"action": "clear",
+		}`;
+
+// src/mcp/tools/manage-element-interaction-tool.ts
 var EMPTY_INTERACTIONS = {
   version: 1,
   items: []
 };
+var EFFECTS_WITHOUT_TYPE = ["custom"];
 var initManageElementInteractionTool = (reg) => {
   const { addTool } = reg;
   const extendedSchema = (0, import_utils2.isProActive)() ? { ...baseSchema, ...proSchema } : baseSchema;
@@ -1495,16 +2025,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];
@@ -1517,7 +2067,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const newItem = createInteractionItem({
             interactionId: generateTempInteractionId(),
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [...updatedItems, newItem];
           break;
@@ -1536,7 +2087,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const updatedItem = createInteractionItem({
             interactionId,
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [
             ...updatedItems.slice(0, itemIndex),
@@ -1570,7 +2122,7 @@ var initManageElementInteractionTool = (reg) => {
         items: updatedItems
       };
       try {
-        (0, import_editor_elements5.updateElementInteractions)({ elementId, interactions: updatedInteractions });
+        (0, import_editor_elements7.updateElementInteractions)({ elementId, interactions: updatedInteractions });
       } catch (error) {
         throw new Error(
           `Failed to update interactions for element "${elementId}": ${error instanceof Error ? error.message : "Unknown error"}`
@@ -1587,73 +2139,18 @@ var initManageElementInteractionTool = (reg) => {
 };
 
 // src/mcp/index.ts
-var initMcpInteractions = () => {
-  const reg = (0, import_editor_mcp.getMCPByDomain)("interactions", {
-    instructions: `
-		MCP server for managing element interactions and animations. Use this to add, modify, or remove animations and motion effects triggered by user events such as page load or scroll-into-view.
-		** IMPORTANT **
-		Use the "interactions-schema" resource to get the schema of the interactions.
-		Actions:
-		- get: Read the current interactions on the element.
-		- add: Add a new interaction (max ${MAX_INTERACTIONS_PER_ELEMENT} per element).
-		- update: Update an existing interaction by its interactionId.
-		- delete: Remove a specific interaction by its interactionId.
-		- clear: Remove all interactions from the element.
-		
-		For add/update, provide: trigger, effect, effectType, direction (required for slide effect), duration, delay, easing.
-		Use excludedBreakpoints to disable the animation on specific responsive breakpoints (e.g. ["mobile", "tablet"]).
-		Example Get Request:
-		{
-			"elementId": "123",
-			"action": "get",
-			"interactionId": "123",
-			"animationData": {
-				"trigger": "click",
-				"effect": "fade",
-			}
-		}
-		Example Add Request:
-		{
-			"elementId": "123",
-			"action": "add",
-			"animationData": {
-				"effectType": "in",
-				"direction": "top",
-				"trigger": "click",
-				"effect": "fade",
-				"duration": 1000,
-				"delay": 0,
-				"easing": "easeIn",
-				"excludedBreakpoints": ["mobile", "tablet"],
-			}
-		}
-		Example Update Request:
-		{
-			"elementId": "123",
-			"action": "update",
-			"interactionId": "123",
-			"animationData": {
-				"trigger": "click",
-				"effect": "fade",
-			}
-		}
-		Example Delete Request:
-		{
-			"elementId": "123",
-			"action": "delete",
-			"interactionId": "123",
-		}
-		Example Clear Request:
-		{
-			"elementId": "123",
-			"action": "clear",
-		}
-		`
-  });
-  reg.waitForReady().then(() => {
-    initInteractionsSchemaResource(reg);
-    initManageElementInteractionTool(reg);
-  });
+var initMcpInteractions = (reg) => {
+  const { setMCPDescription } = reg;
+  setMCPDescription(
+    `Everything related to V4 ( Atomic ) interactions.
+# Interactions
+- Create/update/delete interactions
+- Get list of interactions
+- Get details of an interaction
+`
+  );
+  initInteractionsSchemaResource(reg);
+  initManageElementInteractionTool(reg);
 };
 
 // src/init.ts
@@ -1661,6 +2158,7 @@ function init() {
   try {
     interactionsRepository.register(documentElementsInteractionsProvider);
     initCleanInteractionIdsOnDuplicate();
+    initPasteInteractionsCommand();
     registerInteractionsControl({
       type: "trigger",
       component: Trigger,
@@ -1674,7 +2172,7 @@ function init() {
     registerInteractionsControl({
       type: "replay",
       component: Replay,
-      options: ["true", "false"]
+      options: ["no"]
     });
     registerInteractionsControl({
       type: "effectType",
@@ -1691,7 +2189,11 @@ function init() {
       component: Effect,
       options: ["fade", "slide", "scale"]
     });
-    initMcpInteractions();
+    registerInteractionsControl({
+      type: "repeat",
+      component: Repeat
+    });
+    initMcpInteractions((0, import_editor_mcp.getMCPByDomain)("interactions", { instructions: EDITOR_INTERACTIONS_MCP_INSTRUCTIONS }));
   } catch (error) {
     throw error;
   }
@@ -1707,12 +2209,37 @@ function init() {
   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.js.map