@elementor/editor-interactions 4.0.0-manual → 4.1.0-685

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/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/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/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,30 @@ var createSizeValue = (size, unit) => {
   return { size, unit };
 };
 
+// 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: {
@@ -198,6 +154,8 @@ var createConfig = ({
   replay,
   easing = "easeIn",
   relativeTo = "",
+  repeat = "",
+  times = 1,
   start = 85,
   end = 15
 }) => ({
@@ -206,6 +164,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,6 +201,8 @@ var createAnimationPreset = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
+  repeat,
+  times,
   start,
   end,
   customEffects
@@ -256,6 +218,8 @@ var createAnimationPreset = ({
       replay,
       easing,
       relativeTo,
+      repeat,
+      times,
       start,
       end
     })
@@ -272,6 +236,8 @@ var createInteractionItem = ({
   replay = false,
   easing = "easeIn",
   relativeTo,
+  repeat,
+  times,
   start,
   end,
   excludedBreakpoints,
@@ -290,6 +256,8 @@ var createInteractionItem = ({
       replay,
       easing,
       relativeTo,
+      repeat,
+      times,
       start,
       end,
       customEffects
@@ -300,17 +268,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 +308,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 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
+}) {
+  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";
@@ -352,19 +495,6 @@ import { PopoverContent } from "@elementor/editor-controls";
 import { Box, 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 +587,8 @@ var DEFAULT_VALUES = {
   replay: false,
   easing: "easeIn",
   relativeTo: "viewport",
+  repeat: "",
+  times: 1,
   start: 85,
   end: 15
 };
@@ -469,6 +601,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 +612,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 +638,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 +653,8 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
     easing,
     replay,
     relativeTo,
+    repeat,
+    times,
     start,
     end,
     customEffects
@@ -531,6 +677,14 @@ 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) => {
@@ -554,6 +708,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
@@ -592,6 +748,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,
     {
@@ -637,7 +801,7 @@ var InteractionDetails = ({ interaction, onChange, onPlayInteraction }) => {
 
 // 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 +813,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,6 +910,7 @@ var InteractionsListItem = ({
 var MAX_NUMBER_OF_INTERACTIONS = 5;
 function InteractionsList(props) {
   const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
+  const { elementId } = useInteractionsContext();
   const hasInitializedRef = useRef3(false);
   const handleUpdateInteractions = useCallback5(
     (newInteractions) => {
@@ -771,13 +936,19 @@ function InteractionsList(props) {
     "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 +1008,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 +1047,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 +1107,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 +1122,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 +1146,145 @@ var documentElementsInteractionsProvider = createInteractionsProvider({
   }
 });
 
+// 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 +1295,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 { 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 { __ 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,16 +1332,17 @@ 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,
@@ -1091,7 +1366,8 @@ function PromotionSelect({
   disabledOptions,
   promotionLabel,
   promotionContent,
-  upgradeUrl
+  upgradeUrl,
+  trackingData
 }) {
   const promotionRef = useRef4(null);
   const anchorRef = useRef4(null);
@@ -1122,14 +1398,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 +1415,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 +1439,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 +1471,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,19 +1485,19 @@ 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
     }
   ];
@@ -1228,10 +1509,11 @@ import * as React18 from "react";
 import { ToggleButtonGroupUi as ToggleButtonGroupUi3 } 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 __13 } from "@wordpress/i18n";
+var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
-  no: __12("No", "elementor"),
-  yes: __12("Yes", "elementor")
+  no: __13("No", "elementor"),
+  yes: __13("Yes", "elementor")
 };
 var BASE_REPLAY = ["no"];
 var OVERLAY_GRID = "1 / 1";
@@ -1256,22 +1538,24 @@ function Replay({ onChange, anchorRef }) {
   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,
     {
-      content: __12("Upgrade to run the animation every time its trigger occurs.", "elementor"),
+      content: __13("Upgrade to run the animation every time its trigger occurs.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
-      anchorRef
+      anchorRef,
+      trackingData: TRACKING_DATA3
     }
   )));
 }
 
 // src/components/controls/trigger.tsx
 import * as React19 from "react";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
+var TRACKING_DATA4 = { 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: __14("Page load", "elementor"),
+  scrollIn: __14("Scroll into view", "elementor"),
+  scrollOn: __14("While scrolling", "elementor"),
+  hover: __14("On hover", "elementor"),
+  click: __14("On click", "elementor")
 };
 var BASE_TRIGGERS = ["load", "scrollIn"];
 function Trigger({ value, onChange }) {
@@ -1288,15 +1572,16 @@ function Trigger({ value, onChange }) {
       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: __14("PRO triggers", "elementor"),
+      promotionContent: __14("Upgrade to unlock more interactions triggers.", "elementor"),
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
+      trackingData: TRACKING_DATA4
     }
   );
 }
 
 // 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 +1592,7 @@ function initCleanInteractionIdsOnDuplicate() {
   });
 }
 function cleanInteractionIdsRecursive(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1316,7 +1601,7 @@ function cleanInteractionIdsRecursive(elementId) {
   });
 }
 function cleanInteractionIds(elementId) {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return;
   }
@@ -1415,13 +1700,14 @@ 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";
 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 +1734,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 +1776,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const newItem = createInteractionItem({
             interactionId: generateTempInteractionId(),
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [...updatedItems, newItem];
           break;
@@ -1489,7 +1796,8 @@ var initManageElementInteractionTool = (reg) => {
           }
           const updatedItem = createInteractionItem({
             interactionId,
-            ...animationData
+            ...restAnimationData,
+            type: resolvedType
           });
           updatedItems = [
             ...updatedItems.slice(0, itemIndex),
@@ -1523,7 +1831,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"}`
@@ -1614,6 +1922,7 @@ function init() {
   try {
     interactionsRepository.register(documentElementsInteractionsProvider);
     initCleanInteractionIdsOnDuplicate();
+    initPasteInteractionsCommand();
     registerInteractionsControl({
       type: "trigger",
       component: Trigger,
@@ -1627,7 +1936,7 @@ function init() {
     registerInteractionsControl({
       type: "replay",
       component: Replay,
-      options: ["true", "false"]
+      options: ["no"]
     });
     registerInteractionsControl({
       type: "effectType",
@@ -1661,10 +1970,33 @@ export {
   InteractionsTab,
   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