@elementor/editor-variables 4.3.0-947 → 4.3.0-949

package/dist/index.mjs

@@ -10,20 +10,31 @@ import { __ as __10 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getMixpanel } from "@elementor/events";
-var trackVariableEvent = ({ varType, controlPath, action }) => {
+var trackVariableEvent = ({ varType, controlPath, action, executedBy }) => {
   const { dispatchEvent, config } = getMixpanel();
   if (!config?.names?.variables?.[action]) {
     return;
   }
   const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
+  let eventData = {
     var_type: varType,
-    control_path: controlPath,
     action_type: name
-  });
+  };
+  if (executedBy) {
+    eventData.executed_by = executedBy;
+  }
+  const defaultLocationInfo = {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || ""
+  };
+  if (!executedBy || executedBy !== "mcp_tool") {
+    eventData = { ...defaultLocationInfo, ...eventData };
+  }
+  if (controlPath) {
+    eventData.control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
 };
 var trackVariablesManagerEvent = ({ action, source, varType, controlPath }) => {
   const { dispatchEvent, config } = getMixpanel();
@@ -465,7 +476,7 @@ var service = {
       return variables;
     });
   },
-  create: ({ type, label, value }) => {
+  create: ({ type, label, value }, options = {}) => {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
@@ -481,13 +492,18 @@ var service = {
       styleVariablesRepository.update({
         [variableId]: createdVariable
       });
+      trackVariableEvent({
+        varType: type,
+        action: "save",
+        ...options.eventData
+      });
       return {
         id: variableId,
         variable: createdVariable
       };
     });
   },
-  update: (id, { label, value, type }) => {
+  update: (id, { label, value, type }, options = {}) => {
     return apiClient.update(id, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
@@ -503,6 +519,11 @@ var service = {
       styleVariablesRepository.update({
         [variableId]: updatedVariable
       });
+      trackVariableEvent({
+        varType: updatedVariable.type,
+        action: "update",
+        ...options.eventData
+      });
       return {
         id: variableId,
         variable: updatedVariable
@@ -979,11 +1000,11 @@ var normalizeVariables = (propKey) => {
   return variablesToList(variables).filter((variable) => matchingTypes.includes(variable.type)).map(toNormalizedVariable);
 };
 var extractId = ({ id }) => id;
-var createVariable = (newVariable) => {
-  return service.create(newVariable).then(extractId);
+var createVariable = (newVariable, options) => {
+  return service.create(newVariable, options).then(extractId);
 };
-var updateVariable = (updateId, { value, label, type }) => {
-  return service.update(updateId, { value, label, type }).then(extractId);
+var updateVariable = (updateId, { value, label, type }, options) => {
+  return service.update(updateId, { value, label, type }, options).then(extractId);
 };
 var deleteVariable = (deleteId) => {
   return service.delete(deleteId).then(extractId);
@@ -2319,7 +2340,7 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
 import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
 import { registerControlReplacement } from "@elementor/editor-controls";
 import { getMCPByDomain } from "@elementor/editor-mcp";
-import { isTransformable as isTransformable2 } from "@elementor/editor-props";
+import { isTransformable as isTransformable3 } from "@elementor/editor-props";
 import { controlActionsMenu } from "@elementor/menus";
 
 // src/components/global-styles-import-listener.tsx
@@ -2338,6 +2359,78 @@ function GlobalStylesImportListener() {
   return null;
 }
 
+// src/components/mcp-variable-connect-listener.tsx
+import { useEffect as useEffect6 } from "react";
+import { MCP_STYLES_APPLIED_EVENT } from "@elementor/editor-mcp";
+
+// src/utils/extract-variables-from-style-value.ts
+import { getPropSchemaFromCache, isTransformable } from "@elementor/editor-props";
+var VARIABLE_TYPE_KEYS = [
+  "global-color-variable",
+  "global-font-variable",
+  "global-size-variable",
+  "global-custom-size-variable"
+];
+function tryExtractVariable(value) {
+  for (const key of VARIABLE_TYPE_KEYS) {
+    const propUtil = getPropSchemaFromCache(key);
+    if (propUtil?.isValid(value)) {
+      return {
+        type: key,
+        variableId: propUtil.extract(value)
+      };
+    }
+  }
+  return null;
+}
+function traverse(value, path, result) {
+  const extracted = tryExtractVariable(value);
+  if (extracted) {
+    result.push({
+      ...extracted,
+      controlPath: path.join(".")
+    });
+    return;
+  }
+  if (isTransformable(value)) {
+    traverse(value.value, path, result);
+    return;
+  }
+  if (value && typeof value === "object") {
+    for (const [key, val] of Object.entries(value)) {
+      traverse(val, [...path, key], result);
+    }
+  }
+}
+function extractVariablesFromStyleValue(styleValue) {
+  const result = [];
+  traverse(styleValue, [], result);
+  return result;
+}
+
+// src/components/mcp-variable-connect-listener.tsx
+function McpVariableConnectListener() {
+  useEffect6(() => {
+    const handleMcpStylesApplied = (event) => {
+      const { styleValue } = event.detail;
+      const variables = extractVariablesFromStyleValue(styleValue);
+      variables.forEach(({ type, controlPath }) => {
+        trackVariableEvent({
+          varType: type,
+          controlPath,
+          action: "connect",
+          executedBy: "mcp_tool"
+        });
+      });
+    };
+    window.addEventListener(MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
+    return () => {
+      window.removeEventListener(MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
+    };
+  }, []);
+  return null;
+}
+
 // src/controls/variable-control.tsx
 import * as React33 from "react";
 import { useBoundProp as useBoundProp11 } from "@elementor/editor-controls";
@@ -2406,7 +2499,7 @@ var useInitialValue = () => {
 
 // src/hooks/use-variable-bound-prop.ts
 import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
-import { isTransformable } from "@elementor/editor-props";
+import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 var useVariableBoundProp = () => {
   const { propTypeUtil } = useVariableType();
   const boundProp = useBoundProp3(propTypeUtil);
@@ -2426,7 +2519,7 @@ var resolveBoundPropAndSetValue = (value, boundProp) => {
   return boundProp.setValue(value);
 };
 var unwrapValue = (input) => {
-  if (isTransformable(input)) {
+  if (isTransformable2(input)) {
     return input.value;
   }
   return input;
@@ -2442,7 +2535,7 @@ var FormField = ({ id, label, errorMsg, noticeMsg, children }) => {
 // src/components/variable-creation.tsx
 var SIZE2 = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
-  const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
+  const { icon: VariableIcon, valueField: ValueField, propTypeUtil } = useVariableType();
   const { setVariableValue: setVariable, path } = useVariableBoundProp();
   const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
@@ -2463,11 +2556,14 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     onClose();
   };
   const handleCreateAndTrack = () => {
-    createVariable({
-      value,
-      label,
-      type: propTypeKey
-    }).then((key) => {
+    createVariable(
+      {
+        value,
+        label,
+        type: propTypeKey
+      },
+      { eventData: { controlPath: path.join(".") } }
+    ).then((key) => {
       setVariable(key);
       closePopover();
     }).catch((error) => {
@@ -2482,11 +2578,6 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       }
       setErrorMessage(ERROR_MESSAGES.UNEXPECTED_ERROR);
     });
-    trackVariableEvent({
-      varType: variableType,
-      controlPath: path.join("."),
-      action: "save"
-    });
   };
   const hasEmptyFields = () => {
     if ("" === label.trim()) {
@@ -2571,7 +2662,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect6, useState as useState10 } from "react";
+import { useEffect as useEffect7, useState as useState10 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2632,7 +2723,7 @@ var SIZE3 = "tiny";
 var DELETE_LABEL = __13("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+  const { setVariableValue: notifyBoundPropChange, variableId, path } = useVariableBoundProp();
   const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage2(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = useState10(false);
@@ -2648,7 +2739,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const userPermissions = usePermissions();
   const [value, setValue] = useState10(() => variable.value);
   const [label, setLabel] = useState10(() => variable.label);
-  useEffect6(() => {
+  useEffect7(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2671,7 +2762,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const handleSaveVariable = () => {
     const typeChanged = propTypeKey !== variable.type;
     const updatePayload = typeChanged ? { value, label, type: propTypeKey } : { value, label };
-    updateVariable(editId, updatePayload).then(() => {
+    updateVariable(editId, updatePayload, { eventData: { controlPath: path.join(".") } }).then(() => {
       maybeTriggerBoundPropChange();
       onSubmit?.();
     }).catch((error) => {
@@ -2813,7 +2904,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 import * as React21 from "react";
 import { trackUpgradePromotionClick as trackUpgradePromotionClick2, trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
@@ -3004,7 +3095,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (disabled) {
       trackViewPromotion2({
         target_name: "variables_popover",
@@ -3996,7 +4087,7 @@ function getServiceActions(svc) {
       if (valueError) {
         throw new Error(valueError);
       }
-      return svc.create({ type, label, value });
+      return svc.create({ type, label, value }, { eventData: { executedBy: "mcp_tool" } });
     },
     update({ id, label, value }) {
       if (!id || !label || !value) {
@@ -4013,7 +4104,7 @@ function getServiceActions(svc) {
           throw new Error(valueError);
         }
       }
-      return svc.update(id, { label, value });
+      return svc.update(id, { label, value }, { eventData: { executedBy: "mcp_tool" } });
     },
     delete({ id }) {
       if (!id) {
@@ -4239,7 +4330,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect8, useState as useState19 } from "react";
+import { useEffect as useEffect9, useState as useState19 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent as commandEndEvent2,
@@ -4263,7 +4354,7 @@ function usePortalContainer() {
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState19({});
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4577,9 +4668,13 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
+  injectIntoLogic({
+    id: "mcp-variable-connect-listener",
+    component: McpVariableConnectListener
+  });
 }
 function hasVariableAssigned(value) {
-  if (isTransformable2(value)) {
+  if (isTransformable3(value)) {
     return hasVariableType(value.$$type);
   }
   return false;