@elementor/editor-components 3.35.0-463 → 3.35.0-464

package/dist/index.js

@@ -273,9 +273,17 @@ var selectCurrentComponentId = (0, import_store2.__createSelector)(
   getCurrentComponentId,
   (currentComponentId) => currentComponentId
 );
+var selectCurrentComponent = (0, import_store2.__createSelector)(
+  selectData,
+  getCurrentComponentId,
+  (data, currentComponentId) => data.find((component) => component.id === currentComponentId)
+);
 var useCurrentComponentId = () => {
   return (0, import_store2.__useSelector)(selectCurrentComponentId);
 };
+var useCurrentComponent = () => {
+  return (0, import_store2.__useSelector)(selectCurrentComponent);
+};
 var selectUpdatedComponentNames = (0, import_store2.__createSelector)(
   (state) => state[SLICE_NAME].updatedComponentNames,
   (updatedComponentNames) => Object.entries(updatedComponentNames).map(([componentId, title]) => ({
@@ -371,7 +379,7 @@ var React10 = __toESM(require("react"));
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_icons7 = require("@elementor/icons");
-var import_store25 = require("@elementor/store");
+var import_store27 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
 
@@ -450,6 +458,42 @@ function useNavigateBack() {
   }, [path, documentsManager]);
 }
 
+// src/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
+var import_store7 = require("@elementor/store");
+var FEATURE_NAME = "Components";
+var trackComponentEvent = ({ action, source, ...data }) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.components?.[action]) {
+    return;
+  }
+  const name = config.names.components[action];
+  dispatchEvent?.(name, { ...data, source, "Feature name": FEATURE_NAME });
+};
+var onElementDrop = (_args, element) => {
+  if (!(element?.model?.get("widgetType") === "e-component")) {
+    return;
+  }
+  const editorSettings = element.model.get("editor_settings");
+  const componentName = editorSettings?.title;
+  const componentUID = editorSettings?.component_uid;
+  const instanceId = element.id;
+  const createdThisSession = selectCreatedThisSession((0, import_store7.__getState)());
+  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
+  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
+  const { locations, secondaryLocations } = eventsManagerConfig;
+  trackComponentEvent({
+    action: "instanceAdded",
+    source: "user",
+    instance_id: instanceId,
+    component_uid: componentUID,
+    component_name: componentName,
+    is_same_session_reuse: isSameSessionReuse,
+    location: locations.widgetPanel,
+    secondary_location: secondaryLocations.componentsTab
+  });
+};
+
 // src/components/component-properties-panel/component-properties-panel.tsx
 var React8 = __toESM(require("react"));
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
@@ -470,13 +514,15 @@ var import_utils2 = require("@elementor/utils");
 var import_i18n9 = require("@wordpress/i18n");
 
 // src/store/actions/add-overridable-group.ts
-var import_store7 = require("@elementor/store");
+var import_store9 = require("@elementor/store");
 function addOverridableGroup({
   componentId,
   groupId,
-  label
+  label,
+  source
 }) {
-  const overridableProps = selectOverridableProps((0, import_store7.__getState)(), componentId);
+  const currentComponent = selectCurrentComponent((0, import_store9.__getState)());
+  const overridableProps = selectOverridableProps((0, import_store9.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -485,7 +531,7 @@ function addOverridableGroup({
     label,
     props: []
   };
-  (0, import_store7.__dispatch)(
+  (0, import_store9.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -501,11 +547,17 @@ function addOverridableGroup({
       }
     })
   );
+  trackComponentEvent({
+    action: "propertiesGroupCreated",
+    source,
+    component_uid: currentComponent?.uid,
+    group_name: label
+  });
   return newGroup;
 }
 
 // src/store/actions/delete-overridable-group.ts
-var import_store9 = require("@elementor/store");
+var import_store11 = require("@elementor/store");
 
 // src/store/utils/groups-transformers.ts
 var import_utils = require("@elementor/utils");
@@ -653,7 +705,7 @@ function renameGroup(groups, groupId, newLabel) {
 
 // src/store/actions/delete-overridable-group.ts
 function deleteOverridableGroup({ componentId, groupId }) {
-  const overridableProps = selectOverridableProps((0, import_store9.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -662,7 +714,7 @@ function deleteOverridableGroup({ componentId, groupId }) {
     return false;
   }
   const updatedGroups = deleteGroup(overridableProps.groups, groupId);
-  (0, import_store9.__dispatch)(
+  (0, import_store11.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -676,9 +728,9 @@ function deleteOverridableGroup({ componentId, groupId }) {
 
 // src/store/actions/delete-overridable-prop.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
-var import_store11 = require("@elementor/store");
-function deleteOverridableProp({ componentId, propKey }) {
-  const overridableProps = selectOverridableProps((0, import_store11.__getState)(), componentId);
+var import_store13 = require("@elementor/store");
+function deleteOverridableProp({ componentId, propKey, source }) {
+  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -689,7 +741,7 @@ function deleteOverridableProp({ componentId, propKey }) {
   revertElementSetting(prop.elementId, prop.propKey, prop.originValue);
   const { [propKey]: removedProp, ...remainingProps } = overridableProps.props;
   const updatedGroups = removePropFromAllGroups(overridableProps.groups, propKey);
-  (0, import_store11.__dispatch)(
+  (0, import_store13.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -699,6 +751,16 @@ function deleteOverridableProp({ componentId, propKey }) {
       }
     })
   );
+  const currentComponent = selectCurrentComponent((0, import_store13.__getState)());
+  trackComponentEvent({
+    action: "propertyRemoved",
+    source,
+    component_uid: currentComponent?.uid,
+    property_id: removedProp.overrideKey,
+    property_path: removedProp.propKey,
+    property_name: removedProp.label,
+    element_type: removedProp.widgetType ?? removedProp.elType
+  });
 }
 function revertElementSetting(elementId, settingKey, originValue) {
   const container = (0, import_editor_elements2.getContainer)(elementId);
@@ -713,9 +775,9 @@ function revertElementSetting(elementId, settingKey, originValue) {
 }
 
 // src/store/actions/reorder-group-props.ts
-var import_store13 = require("@elementor/store");
+var import_store15 = require("@elementor/store");
 function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -723,7 +785,7 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
   if (!group) {
     return;
   }
-  (0, import_store13.__dispatch)(
+  (0, import_store15.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -744,13 +806,13 @@ function reorderGroupProps({ componentId, groupId, newPropsOrder }) {
 }
 
 // src/store/actions/reorder-overridable-groups.ts
-var import_store15 = require("@elementor/store");
+var import_store17 = require("@elementor/store");
 function reorderOverridableGroups({ componentId, newOrder }) {
-  const overridableProps = selectOverridableProps((0, import_store15.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
-  (0, import_store15.__dispatch)(
+  (0, import_store17.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -765,14 +827,14 @@ function reorderOverridableGroups({ componentId, newOrder }) {
 }
 
 // src/store/actions/update-overridable-prop-params.ts
-var import_store17 = require("@elementor/store");
+var import_store19 = require("@elementor/store");
 function updateOverridablePropParams({
   componentId,
   overrideKey,
   label,
   groupId
 }) {
-  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -788,7 +850,7 @@ function updateOverridablePropParams({
     groupId: newGroupId
   };
   const updatedGroups = movePropBetweenGroups(overridableProps.groups, overrideKey, oldGroupId, newGroupId);
-  (0, import_store17.__dispatch)(
+  (0, import_store19.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -805,9 +867,9 @@ function updateOverridablePropParams({
 }
 
 // src/components/component-panel-header/use-overridable-props.ts
-var import_store19 = require("@elementor/store");
+var import_store21 = require("@elementor/store");
 function useOverridableProps2(componentId) {
-  return (0, import_store19.__useSelector)((state) => {
+  return (0, import_store21.__useSelector)((state) => {
     if (!componentId) {
       return void 0;
     }
@@ -1351,9 +1413,9 @@ var import_editor_ui4 = require("@elementor/editor-ui");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/store/actions/rename-overridable-group.ts
-var import_store21 = require("@elementor/store");
+var import_store23 = require("@elementor/store");
 function renameOverridableGroup({ componentId, groupId, label }) {
-  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store23.__getState)(), componentId);
   if (!overridableProps) {
     return false;
   }
@@ -1362,7 +1424,7 @@ function renameOverridableGroup({ componentId, groupId, label }) {
     return false;
   }
   const updatedGroups = renameGroup(overridableProps.groups, groupId, label);
-  (0, import_store21.__dispatch)(
+  (0, import_store23.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1485,7 +1547,12 @@ function ComponentPropertiesPanelContent({ onClose }) {
     }
     const newGroupId = (0, import_utils2.generateUniqueId)("group");
     const newLabel = generateUniqueLabel(groups);
-    addOverridableGroup({ componentId: currentComponentId, groupId: newGroupId, label: newLabel });
+    addOverridableGroup({
+      componentId: currentComponentId,
+      groupId: newGroupId,
+      label: newLabel,
+      source: "user"
+    });
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
     setIsAddingGroup(false);
     groupLabelEditable.setEditingGroupId(newGroupId);
@@ -1499,7 +1566,7 @@ function ComponentPropertiesPanelContent({ onClose }) {
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   };
   const handlePropertyDelete = (propKey) => {
-    deleteOverridableProp({ componentId: currentComponentId, propKey });
+    deleteOverridableProp({ componentId: currentComponentId, propKey, source: "user" });
     (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   };
   const handlePropertyUpdate = (overrideKey, data) => {
@@ -1582,34 +1649,32 @@ var import_react6 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
-var ComponentsBadge = React9.forwardRef(
-  ({ overridesCount, onClick }, ref) => {
-    const prevCount = usePrevious(overridesCount);
-    const isFirstOverride = prevCount === 0 && overridesCount === 1;
-    return /* @__PURE__ */ React9.createElement(
-      StyledBadge,
+var ComponentsBadge = React9.forwardRef(({ overridablePropsCount, onClick }, ref) => {
+  const prevCount = usePrevious(overridablePropsCount);
+  const isFirstExposedProperty = prevCount === 0 && overridablePropsCount === 1;
+  return /* @__PURE__ */ React9.createElement(
+    StyledBadge,
+    {
+      ref,
+      color: "primary",
+      key: overridablePropsCount,
+      invisible: overridablePropsCount === 0,
+      animate: isFirstExposedProperty,
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      badgeContent: /* @__PURE__ */ React9.createElement(import_ui9.Box, { sx: { animation: !isFirstExposedProperty ? `${slideUp} 300ms ease-out` : "none" } }, overridablePropsCount)
+    },
+    /* @__PURE__ */ React9.createElement(
+      import_ui9.ToggleButton,
       {
-        ref,
-        color: "primary",
-        key: overridesCount,
-        invisible: overridesCount === 0,
-        animate: isFirstOverride,
-        anchorOrigin: { vertical: "top", horizontal: "right" },
-        badgeContent: /* @__PURE__ */ React9.createElement(import_ui9.Box, { sx: { animation: !isFirstOverride ? `${slideUp} 300ms ease-out` : "none" } }, overridesCount)
+        value: "exposed properties",
+        size: "tiny",
+        onClick,
+        "aria-label": (0, import_i18n11.__)("View exposed properties", "elementor")
       },
-      /* @__PURE__ */ React9.createElement(
-        import_ui9.ToggleButton,
-        {
-          value: "overrides",
-          size: "tiny",
-          onClick,
-          "aria-label": (0, import_i18n11.__)("View overrides", "elementor")
-        },
-        /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
-      )
-    );
-  }
-);
+      /* @__PURE__ */ React9.createElement(import_icons6.ComponentPropListIcon, { fontSize: "tiny" })
+    )
+  );
+});
 var StyledBadge = (0, import_ui9.styled)(import_ui9.Badge, { shouldForwardProp: (prop) => prop !== "animate" })(
   ({ theme, animate }) => ({
     "& .MuiBadge-badge": {
@@ -1642,14 +1707,14 @@ var slideUp = import_ui9.keyframes`
 // src/components/component-panel-header/component-panel-header.tsx
 var MESSAGE_KEY = "components-properties-introduction";
 var ComponentPanelHeader = () => {
-  const currentComponentId = useCurrentComponentId();
+  const { id: currentComponentId, uid: componentUid } = useCurrentComponent() ?? { id: null, uid: null };
   const overridableProps = useOverridableProps2(currentComponentId);
   const onBack = useNavigateBack();
   const componentName = getComponentName();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = React10.useState(!isMessageSuppressed);
   const { open: openPropertiesPanel } = usePanelActions();
-  const overridesCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
+  const overridablePropsCount = overridableProps ? Object.keys(overridableProps.props).length : 0;
   const anchorRef = React10.useRef(null);
   if (!currentComponentId) {
     return null;
@@ -1658,6 +1723,15 @@ var ComponentPanelHeader = () => {
     suppressMessage();
     setShouldShowIntroduction(false);
   };
+  const handleOpenPropertiesPanel = () => {
+    openPropertiesPanel();
+    trackComponentEvent({
+      action: "propertiesPanelOpened",
+      source: "user",
+      component_uid: componentUid,
+      properties_count: overridablePropsCount
+    });
+  };
   return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
     import_ui10.Stack,
     {
@@ -1667,7 +1741,14 @@ var ComponentPanelHeader = () => {
       sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
     },
     /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n12.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n12.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(ComponentsBadge, { overridesCount, ref: anchorRef, onClick: openPropertiesPanel })
+    /* @__PURE__ */ React10.createElement(
+      ComponentsBadge,
+      {
+        overridablePropsCount,
+        ref: anchorRef,
+        onClick: handleOpenPropertiesPanel
+      }
+    )
   ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
     {
@@ -1678,7 +1759,7 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
-  const state = (0, import_store25.__getState)();
+  const state = (0, import_store27.__getState)();
   const path = state[SLICE_NAME].path;
   const { instanceTitle } = path.at(-1) ?? {};
   if (instanceTitle) {
@@ -1694,10 +1775,10 @@ var React19 = __toESM(require("react"));
 var import_editor_ui9 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
-var import_store27 = require("@elementor/store");
+var import_store29 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store27.__useSelector)(selectComponents);
-  const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store29.__useSelector)(selectComponents);
+  const isLoading = (0, import_store29.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
@@ -1790,42 +1871,6 @@ var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents6 = require("@elementor/editor-documents");
 var import_store31 = require("@elementor/store");
 var import_i18n14 = require("@wordpress/i18n");
-
-// src/utils/tracking.ts
-var import_mixpanel = require("@elementor/mixpanel");
-var import_store29 = require("@elementor/store");
-var trackComponentEvent = ({ action, ...data }) => {
-  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
-  if (!config?.names?.components?.[action]) {
-    return;
-  }
-  const name = config.names.components[action];
-  dispatchEvent?.(name, data);
-};
-var onElementDrop = (_args, element) => {
-  if (!(element?.model?.get("widgetType") === "e-component")) {
-    return;
-  }
-  const editorSettings = element.model.get("editor_settings");
-  const componentName = editorSettings?.title;
-  const componentUID = editorSettings?.component_uid;
-  const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store29.__getState)());
-  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
-  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
-  const { locations, secondaryLocations } = eventsManagerConfig;
-  trackComponentEvent({
-    action: "instanceAdded",
-    instance_id: instanceId,
-    component_uid: componentUID,
-    component_name: componentName,
-    is_same_session_reuse: isSameSessionReuse,
-    location: locations.widgetPanel,
-    secondary_location: secondaryLocations.componentsTab
-  });
-};
-
-// src/create-component-type.ts
 var COMPONENT_WIDGET_TYPE = "e-component";
 var updateGroups = (groups, config) => {
   const disableMap = new Map(Object.entries(config.disable ?? {}));
@@ -1967,6 +2012,7 @@ function createComponentView(options) {
       const editorSettings = this.model.get("editor_settings");
       trackComponentEvent({
         action: "edited",
+        source: "user",
         component_uid: editorSettings?.component_uid,
         component_name: editorSettings?.title,
         location,
@@ -2367,8 +2413,7 @@ var createComponentModel2 = (component) => {
             value: component.id ?? component.uid
           }
         }
-      },
-      overridable_props: component.overridableProps
+      }
     },
     editor_settings: {
       component_uid: component.uid
@@ -2927,19 +2972,28 @@ function findNonAtomicElementsInElement(element) {
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store45 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
-async function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
+async function createUnpublishedComponent({
+  name,
+  element,
+  eventData,
+  uid,
+  overridableProps,
+  source
+}) {
   const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
-  const componentBase = { uid: generatedUid, name, overridableProps };
+  const componentBase = { uid: generatedUid, name };
   (0, import_store45.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
-      elements: [element]
+      elements: [element],
+      overridableProps
     })
   );
   (0, import_store45.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   const componentInstance = await replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
+    source,
     component_uid: generatedUid,
     component_name: name,
     ...eventData
@@ -3051,6 +3105,7 @@ function CreateComponentForm() {
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
       trackComponentEvent({
         action: "createClicked",
+        source: "user",
         ...eventData.current
       });
     };
@@ -3064,11 +3119,12 @@ function CreateComponentForm() {
       if (!element) {
         throw new Error(`Can't save element as component: element not found`);
       }
-      const { uid, instanceId } = await createUnpublishedComponent(
-        values.componentName,
-        element.element,
-        eventData.current
-      );
+      const { uid, instanceId } = await createUnpublishedComponent({
+        name: values.componentName,
+        element: element.element,
+        eventData: eventData.current,
+        source: "user"
+      });
       const publishedComponentId = selectComponentByUid((0, import_store47.__getState)(), uid)?.id;
       if (publishedComponentId) {
         switchToComponent(publishedComponentId, instanceId);
@@ -3098,6 +3154,7 @@ function CreateComponentForm() {
     resetAndClosePopup();
     trackComponentEvent({
       action: "createCancelled",
+      source: "user",
       ...eventData.current
     });
   };
@@ -4056,7 +4113,8 @@ function setOverridableProp({
   elType,
   widgetType,
   originValue,
-  originPropFields
+  originPropFields,
+  source
 }) {
   const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
   if (!overridableProps) {
@@ -4104,6 +4162,19 @@ function setOverridableProp({
       }
     })
   );
+  const isNewProperty = !existingOverridableProp;
+  if (isNewProperty) {
+    const currentComponent = selectCurrentComponent((0, import_store58.__getState)());
+    trackComponentEvent({
+      action: "propertyExposed",
+      source,
+      component_uid: currentComponent?.uid,
+      property_id: overridableProp.overrideKey,
+      property_path: propKey,
+      property_name: label,
+      element_type: widgetType ?? elType
+    });
+  }
   return overridableProp;
 }
 
@@ -4232,7 +4303,8 @@ function Content2({ componentId, overridableProps }) {
       elType: elType ?? "widget",
       widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
       originValue,
-      originPropFields: matchingOverridableProp?.originPropFields
+      originPropFields: matchingOverridableProp?.originPropFields,
+      source: "user"
     });
     if (!overridableValue && overridablePropConfig) {
       setOverridableValue({
@@ -4350,7 +4422,14 @@ var handleSaveAsComponent = async (params) => {
     }
     throw new Error("Unknown error");
   }
-  createUnpublishedComponent(componentName, element, null, overridableProps, uid);
+  await createUnpublishedComponent({
+    name: componentName,
+    element,
+    eventData: null,
+    uid,
+    overridableProps,
+    source: "mcp_tool"
+  });
   return {
     status: "ok",
     message: `Component "${componentName}" created successfully.`,