@elementor/editor-components 3.35.0-411 → 3.35.0-413

package/dist/index.js

@@ -43,7 +43,7 @@ var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_panels4 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
-var import_store67 = require("@elementor/store");
+var import_store76 = require("@elementor/store");
 var import_i18n26 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
@@ -99,6 +99,12 @@ var apiClient = {
       componentIds
     }
   ).then((res) => res.data.data),
+  updateComponentTitle: (updatedComponentNames) => (0, import_http_client.httpService)().post(
+    `${BASE_URL}/update-titles`,
+    {
+      components: updatedComponentNames
+    }
+  ).then((res) => res.data.data),
   validate: async (payload) => await (0, import_http_client.httpService)().post(`${BASE_URL}/create-validate`, payload).then((res) => res.data)
 };
 
@@ -117,7 +123,8 @@ var initialState = {
   createdThisSession: [],
   archivedData: [],
   path: [],
-  currentComponentId: null
+  currentComponentId: null,
+  updatedComponentNames: {}
 };
 var SLICE_NAME = "components";
 var slice = (0, import_store2.__createSlice)({
@@ -171,6 +178,19 @@ var slice = (0, import_store2.__createSlice)({
         return;
       }
       component.overridableProps = payload.overridableProps;
+    },
+    rename: (state, { payload }) => {
+      const component = state.data.find((comp) => comp.uid === payload.componentUid);
+      if (!component) {
+        return;
+      }
+      if (component.id) {
+        state.updatedComponentNames[component.id] = payload.name;
+      }
+      component.name = payload.name;
+    },
+    cleanUpdatedComponentNames: (state) => {
+      state.updatedComponentNames = {};
     }
   },
   extraReducers: (builder) => {
@@ -198,6 +218,7 @@ var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((compo
 var useComponent = (componentId) => {
   return (0, import_store2.__useSelector)((state) => componentId ? selectComponent(state, componentId) : null);
 };
+var selectComponentByUid = (state, componentUid) => state[SLICE_NAME].data.find((component) => component.uid === componentUid) ?? state[SLICE_NAME].unpublishedData.find((component) => component.uid === componentUid);
 var selectComponents = (0, import_store2.__createSelector)(
   selectData,
   selectUnpublishedData,
@@ -261,6 +282,13 @@ var selectArchivedComponents = (0, import_store2.__createSelector)(
   selectArchivedData,
   (archivedData) => archivedData
 );
+var selectUpdatedComponentNames = (0, import_store2.__createSelector)(
+  (state) => state[SLICE_NAME].updatedComponentNames,
+  (updatedComponentNames) => Object.entries(updatedComponentNames).map(([componentId, title]) => ({
+    componentId: Number(componentId),
+    title
+  }))
+);
 
 // src/utils/component-document-data.ts
 var import_editor_documents = require("@elementor/editor-documents");
@@ -352,6 +380,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_ui10 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
 
@@ -1582,6 +1611,12 @@ var ComponentPanelHeader = () => {
   ));
 };
 function getComponentName() {
+  const state = (0, import_store25.__getState)();
+  const path = state[SLICE_NAME].path;
+  const { instanceTitle } = path.at(-1) ?? {};
+  if (instanceTitle) {
+    return instanceTitle;
+  }
   const documentsManager = (0, import_editor_documents5.getV1DocumentsManager)();
   const currentDocument = documentsManager.getCurrent();
   return currentDocument?.container?.settings?.get("post_title") ?? "";
@@ -1643,35 +1678,42 @@ var ComponentSearch = () => {
 var React15 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
-var import_store26 = require("@elementor/store");
+var import_store27 = require("@elementor/store");
 var useComponents = () => {
-  const components = (0, import_store26.__useSelector)(selectComponents);
-  const isLoading = (0, import_store26.__useSelector)(selectLoadIsPending);
+  const components = (0, import_store27.__useSelector)(selectComponents);
+  const isLoading = (0, import_store27.__useSelector)(selectLoadIsPending);
   return { components, isLoading };
 };
 
+// src/store/actions/rename-component.ts
+var import_store29 = require("@elementor/store");
+var renameComponent = (componentUid, newName) => {
+  (0, import_store29.__dispatch)(slice.actions.rename({ componentUid, name: newName }));
+};
+
 // src/components/components-tab/components-item.tsx
 var React13 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_elements6 = require("@elementor/editor-elements");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/store/actions/archive-component.ts
 var import_editor_documents6 = require("@elementor/editor-documents");
-var import_store28 = require("@elementor/store");
+var import_store31 = require("@elementor/store");
 var archiveComponent = (componentId) => {
-  const store = (0, import_store28.__getStore)();
-  const dispatch16 = store?.dispatch;
-  if (!dispatch16) {
+  const store = (0, import_store31.__getStore)();
+  const dispatch18 = store?.dispatch;
+  if (!dispatch18) {
     return;
   }
-  dispatch16(slice.actions.archive(componentId));
+  dispatch18(slice.actions.archive(componentId));
   (0, import_editor_documents6.setDocumentModifiedStatus)(true);
 };
 
@@ -1681,11 +1723,12 @@ var import_editor_documents8 = require("@elementor/editor-documents");
 // src/create-component-type.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 var import_editor_documents7 = require("@elementor/editor-documents");
+var import_store35 = require("@elementor/store");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_mixpanel = require("@elementor/mixpanel");
-var import_store30 = require("@elementor/store");
+var import_store33 = require("@elementor/store");
 var trackComponentEvent = ({ action, ...data }) => {
   const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
   if (!config?.names?.components?.[action]) {
@@ -1702,7 +1745,7 @@ var onElementDrop = (_args, element) => {
   const componentName = editorSettings?.title;
   const componentUID = editorSettings?.component_uid;
   const instanceId = element.id;
-  const createdThisSession = selectCreatedThisSession((0, import_store30.__getState)());
+  const createdThisSession = selectCreatedThisSession((0, import_store33.__getState)());
   const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
   const eventsManagerConfig = window.elementorCommon.eventsManager.config;
   const { locations, secondaryLocations } = eventsManagerConfig;
@@ -1736,13 +1779,17 @@ var updateGroups = (groups, config) => {
 };
 function createComponentType(options) {
   const legacyWindow = window;
-  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  return class extends WidgetType {
     getType() {
       return options.type;
     }
     getView() {
       return createComponentView({ ...options });
     }
+    getModel() {
+      return createComponentModel();
+    }
   };
 }
 function createComponentView(options) {
@@ -1872,6 +1919,49 @@ function setInactiveRecursively(model) {
     });
   }
 }
+function createComponentModel() {
+  const legacyWindow = window;
+  const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+  const widgetTypeInstance = new WidgetType();
+  const BaseWidgetModel = widgetTypeInstance.getModel();
+  return BaseWidgetModel.extend({
+    initialize(attributes, options) {
+      BaseWidgetModel.prototype.initialize.call(this, attributes, options);
+      const componentInstance = this.get("settings")?.get("component_instance");
+      if (componentInstance?.value) {
+        const componentId = componentInstance.value.component_id?.value;
+        if (componentId && typeof componentId === "number") {
+          this.set("componentId", componentId);
+        }
+      }
+    },
+    getTitle() {
+      const editorSettings = this.get("editor_settings");
+      const instanceTitle = editorSettings?.title;
+      if (instanceTitle) {
+        return instanceTitle;
+      }
+      const componentUid = editorSettings?.component_uid;
+      if (componentUid) {
+        const component = selectComponentByUid((0, import_store35.__getState)(), componentUid);
+        if (component?.name) {
+          return component.name;
+        }
+      }
+      return window.elementor.getElementData(this).title;
+    },
+    getComponentId() {
+      return this.get("componentId") || null;
+    },
+    getComponentName() {
+      return this.getTitle();
+    },
+    getComponentUid() {
+      const editorSettings = this.get("editor_settings");
+      return editorSettings?.component_uid || null;
+    }
+  });
+}
 
 // src/utils/is-component-instance.ts
 function isComponentInstance(elementModel) {
@@ -1905,7 +1995,7 @@ var getComponentIds = async (elements) => {
 };
 
 // src/store/actions/load-components-overridable-props.ts
-var import_store32 = require("@elementor/store");
+var import_store37 = require("@elementor/store");
 function loadComponentsOverridableProps(componentIds) {
   if (!componentIds.length) {
     return;
@@ -1913,7 +2003,7 @@ function loadComponentsOverridableProps(componentIds) {
   componentIds.forEach(loadComponentOverrides);
 }
 async function loadComponentOverrides(componentId) {
-  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store32.__getState)(), componentId);
+  const isOverridablePropsLoaded = selectIsOverridablePropsLoaded((0, import_store37.__getState)(), componentId);
   if (isOverridablePropsLoaded) {
     return;
   }
@@ -1921,7 +2011,7 @@ async function loadComponentOverrides(componentId) {
   if (!overridableProps) {
     return;
   }
-  (0, import_store32.__dispatch)(
+  (0, import_store37.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps
@@ -1930,12 +2020,12 @@ async function loadComponentOverrides(componentId) {
 }
 
 // src/store/actions/load-components-styles.ts
-var import_store34 = require("@elementor/store");
+var import_store39 = require("@elementor/store");
 async function loadComponentsStyles(componentIds) {
   if (!componentIds.length) {
     return;
   }
-  const knownComponents = selectStyles((0, import_store34.__getState)());
+  const knownComponents = selectStyles((0, import_store39.__getState)());
   const unknownComponentIds = componentIds.filter((id2) => !knownComponents[id2]);
   if (!unknownComponentIds.length) {
     return;
@@ -1953,7 +2043,7 @@ function addStyles(data) {
   const styles = Object.fromEntries(
     data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
   );
-  (0, import_store34.__dispatch)(slice.actions.addStyles(styles));
+  (0, import_store39.__dispatch)(slice.actions.addStyles(styles));
 }
 function extractStyles(element) {
   return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
@@ -1978,6 +2068,52 @@ async function updateDocumentState(componentIds) {
   }
 }
 
+// src/utils/component-name-validation.ts
+var import_store41 = require("@elementor/store");
+
+// src/components/create-component-form/utils/component-form-schema.ts
+var import_schema = require("@elementor/schema");
+var import_i18n14 = require("@wordpress/i18n");
+var MIN_NAME_LENGTH = 2;
+var MAX_NAME_LENGTH = 50;
+var baseComponentSchema = import_schema.z.string().trim().max(MAX_NAME_LENGTH, (0, import_i18n14.__)("Component name is too long. Please keep it under 50 characters.", "elementor"));
+var createBaseComponentSchema = (existingNames) => {
+  return import_schema.z.object({
+    componentName: baseComponentSchema.refine((value) => !existingNames.includes(value), {
+      message: (0, import_i18n14.__)("Component name already exists", "elementor")
+    })
+  });
+};
+var createSubmitComponentSchema = (existingNames) => {
+  const baseSchema = createBaseComponentSchema(existingNames);
+  return baseSchema.extend({
+    componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
+      message: (0, import_i18n14.__)("Component name is required.", "elementor")
+    }).refine((value) => value.length >= MIN_NAME_LENGTH, {
+      message: (0, import_i18n14.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+    })
+  });
+};
+
+// src/utils/component-name-validation.ts
+function validateComponentName(label) {
+  const existingComponentTitles = selectComponents((0, import_store41.__getState)())?.map(({ name }) => name) ?? [];
+  const schema = createSubmitComponentSchema(existingComponentTitles);
+  const result = schema.safeParse({ componentName: label.toLowerCase() });
+  if (result.success) {
+    return {
+      isValid: true,
+      errorMessage: null
+    };
+  }
+  const formattedErrors = result.error.format();
+  const errorMessage = formattedErrors.componentName?._errors[0] ?? formattedErrors._errors[0];
+  return {
+    isValid: false,
+    errorMessage
+  };
+}
+
 // src/utils/get-container-for-new-element.ts
 var import_editor_elements4 = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
@@ -2019,11 +2155,11 @@ var import_editor_elements5 = require("@elementor/editor-elements");
 var replaceElementWithComponent = (element, component) => {
   (0, import_editor_elements5.replaceElement)({
     currentElement: element,
-    newElement: createComponentModel(component),
+    newElement: createComponentModel2(component),
     withHistory: false
   });
 };
-var createComponentModel = (component) => {
+var createComponentModel2 = (component) => {
   return {
     elType: "widget",
     widgetType: "e-component",
@@ -2040,15 +2176,26 @@ var createComponentModel = (component) => {
       overridable_props: component.overridableProps
     },
     editor_settings: {
-      title: component.name,
       component_uid: component.uid
     }
   };
 };
 
 // src/components/components-tab/components-item.tsx
-var ComponentItem = ({ component }) => {
-  const componentModel = createComponentModel(component);
+var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
+  const itemRef = (0, import_react8.useRef)(null);
+  const {
+    ref: editableRef,
+    isEditing,
+    openEditMode,
+    error,
+    getProps: getEditableProps
+  } = (0, import_editor_ui6.useEditable)({
+    value: component.name,
+    onSubmit: renameComponent2,
+    validation: validateComponentTitle
+  });
+  const componentModel = createComponentModel2(component);
   const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
@@ -2068,47 +2215,64 @@ var ComponentItem = ({ component }) => {
     archiveComponent(component.id);
   };
   return /* @__PURE__ */ React13.createElement(import_ui12.Stack, null, /* @__PURE__ */ React13.createElement(
-    import_ui12.ListItemButton,
+    import_editor_ui6.WarningInfotip,
     {
-      draggable: true,
-      onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
-      onDragEnd: handleDragEnd,
-      shape: "rounded",
-      sx: {
-        border: "solid 1px",
-        borderColor: "divider",
-        py: 0.5,
-        px: 1,
-        display: "flex",
-        width: "100%",
-        alignItems: "center",
-        gap: 1
-      }
+      open: Boolean(error),
+      text: error ?? "",
+      placement: "bottom",
+      width: itemRef.current?.getBoundingClientRect().width,
+      offset: [0, -15]
     },
     /* @__PURE__ */ React13.createElement(
-      import_ui12.Box,
+      import_ui12.ListItemButton,
       {
-        onClick: handleClick,
+        draggable: true,
+        onDragStart: (event) => (0, import_editor_canvas5.startDragElementFromPanel)(componentModel, event),
+        onDragEnd: handleDragEnd,
+        shape: "rounded",
+        ref: itemRef,
         sx: {
+          border: "solid 1px",
+          borderColor: "divider",
+          py: 0.5,
+          px: 1,
           display: "flex",
+          width: "100%",
           alignItems: "center",
-          gap: 1,
-          minWidth: 0,
-          flexGrow: 1
+          gap: 1
         }
       },
-      /* @__PURE__ */ React13.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
-      /* @__PURE__ */ React13.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React13.createElement(
-        import_editor_ui6.EllipsisWithTooltip,
+      /* @__PURE__ */ React13.createElement(
+        import_ui12.Box,
         {
-          title: component.name,
-          as: import_ui12.Typography,
-          variant: "caption",
-          color: "text.primary"
-        }
-      ))
-    ),
-    /* @__PURE__ */ React13.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          minWidth: 0,
+          flexGrow: 1,
+          onClick: handleClick
+        },
+        /* @__PURE__ */ React13.createElement(import_ui12.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React13.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
+        /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React13.createElement(import_ui12.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React13.createElement(
+          import_editor_ui6.EditableField,
+          {
+            ref: editableRef,
+            as: import_ui12.Typography,
+            variant: "caption",
+            ...getEditableProps()
+          }
+        ) : /* @__PURE__ */ React13.createElement(
+          import_editor_ui6.EllipsisWithTooltip,
+          {
+            title: component.name,
+            as: import_ui12.Typography,
+            variant: "caption",
+            color: "text.primary"
+          }
+        )))
+      ),
+      /* @__PURE__ */ React13.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+    )
   ), /* @__PURE__ */ React13.createElement(
     import_ui12.Menu,
     {
@@ -2122,7 +2286,18 @@ var ComponentItem = ({ component }) => {
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React13.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, (0, import_i18n14.__)("Archive", "elementor"))
+    /* @__PURE__ */ React13.createElement(
+      import_editor_ui6.MenuListItem,
+      {
+        sx: { minWidth: "160px" },
+        onClick: () => {
+          popupState.close();
+          openEditMode();
+        }
+      },
+      (0, import_i18n15.__)("Rename", "elementor")
+    ),
+    /* @__PURE__ */ React13.createElement(import_editor_ui6.MenuListItem, { sx: { minWidth: "160px" }, onClick: handleArchiveClick }, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n15.__)("Archive", "elementor")))
   ));
 };
 var addComponentToPage = (model) => {
@@ -2137,6 +2312,34 @@ var addComponentToPage = (model) => {
     options: { ...options, useHistory: false, scrollIntoView: true }
   });
 };
+var validateComponentTitle = (newTitle) => {
+  const result = validateComponentName(newTitle);
+  if (!result.errorMessage) {
+    return null;
+  }
+  return result.errorMessage;
+};
+var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
+  shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError"
+})(({ theme, isActive, isError }) => ({
+  display: "flex",
+  width: "100%",
+  flexGrow: 1,
+  borderRadius: theme.spacing(0.5),
+  border: getIndicatorBorder({ isActive, isError, theme }),
+  padding: `0 ${theme.spacing(1)}`,
+  marginLeft: isActive ? theme.spacing(1) : 0,
+  minWidth: 0
+}));
+var getIndicatorBorder = ({ isActive, isError, theme }) => {
+  if (isError) {
+    return `2px solid ${theme.palette.error.main}`;
+  }
+  if (isActive) {
+    return `2px solid ${theme.palette.secondary.main}`;
+  }
+  return "none";
+};
 
 // src/components/components-tab/loading-components.tsx
 var React14 = __toESM(require("react"));
@@ -2191,7 +2394,16 @@ function ComponentsList() {
     }
     return /* @__PURE__ */ React15.createElement(EmptyState, null);
   }
-  return /* @__PURE__ */ React15.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(ComponentItem, { key: component.uid, component })));
+  return /* @__PURE__ */ React15.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React15.createElement(
+    ComponentItem,
+    {
+      key: component.uid,
+      component,
+      renameComponent: (newName) => {
+        renameComponent(component.uid, newName);
+      }
+    }
+  )));
 }
 var EmptyState = () => {
   return /* @__PURE__ */ React15.createElement(
@@ -2205,13 +2417,13 @@ var EmptyState = () => {
       overflow: "hidden"
     },
     /* @__PURE__ */ React15.createElement(import_ui14.Icon, { fontSize: "large" }, /* @__PURE__ */ React15.createElement(import_icons10.EyeIcon, { fontSize: "large" })),
-    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n15.__)("Text that explains that there are no Components yet.", "elementor")),
-    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n15.__)(
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n16.__)("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n16.__)(
       "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
       "elementor"
     )),
     /* @__PURE__ */ React15.createElement(import_ui14.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
-    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n15.__)("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n16.__)("To create a component, first design it, then choose one of three options:", "elementor")),
     /* @__PURE__ */ React15.createElement(
       import_ui14.Typography,
       {
@@ -2220,9 +2432,9 @@ var EmptyState = () => {
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("1. Right-click and select Create Component", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("2. Use the component icon in the Structure panel", "elementor")),
-      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n15.__)("3. Use the component icon in the Edit panel header", "elementor"))
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React15.createElement("span", null, (0, import_i18n16.__)("3. Use the component icon in the Edit panel header", "elementor"))
     )
   );
 };
@@ -2246,7 +2458,7 @@ var EmptySearchResult = () => {
           width: "100%"
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n15.__)("Sorry, nothing matched", "elementor")),
+      /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n16.__)("Sorry, nothing matched", "elementor")),
       searchValue && /* @__PURE__ */ React15.createElement(
         import_ui14.Typography,
         {
@@ -2273,8 +2485,8 @@ var EmptySearchResult = () => {
         /* @__PURE__ */ React15.createElement("span", null, "\u201D.")
       )
     ),
-    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n15.__)("Try something else.", "elementor")),
-    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n15.__)("Clear & try again", "elementor")))
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n16.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React15.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React15.createElement(import_ui14.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n16.__)("Clear & try again", "elementor")))
   );
 };
 var useFilteredComponents = () => {
@@ -2299,7 +2511,7 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 
 // src/components/create-component-form/create-component-form.tsx
 var React17 = __toESM(require("react"));
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_notifications2 = require("@elementor/editor-notifications");
 var import_editor_ui8 = require("@elementor/editor-ui");
@@ -2312,11 +2524,11 @@ var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store36 = require("@elementor/store");
-var import_i18n16 = require("@wordpress/i18n");
+var import_store43 = require("@elementor/store");
+var import_i18n17 = require("@wordpress/i18n");
 var NON_ATOMIC_ELEMENT_ALERT = {
   type: "default",
-  message: (0, import_i18n16.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
+  message: (0, import_i18n17.__)("This widget isn't compatible with components. Use atomic elements instead.", "elementor"),
   id: "non-atomic-element-blocked"
 };
 function initNonAtomicNestingPrevention() {
@@ -2334,7 +2546,7 @@ function initNonAtomicNestingPrevention() {
   });
 }
 function isEditingComponent() {
-  const state = (0, import_store36.__getStore)()?.getState();
+  const state = (0, import_store43.__getStore)()?.getState();
   if (!state) {
     return false;
   }
@@ -2423,18 +2635,18 @@ function findNonAtomicElementsInElement(element) {
 
 // src/store/actions/create-unpublished-component.ts
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store38 = require("@elementor/store");
+var import_store45 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 function createUnpublishedComponent(name, element, eventData, overridableProps, uid) {
   const generatedUid = uid ?? (0, import_utils4.generateUniqueId)("component");
   const componentBase = { uid: generatedUid, name, overridableProps };
-  (0, import_store38.__dispatch)(
+  (0, import_store45.__dispatch)(
     slice.actions.addUnpublished({
       ...componentBase,
       elements: [element]
     })
   );
-  (0, import_store38.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
+  (0, import_store45.__dispatch)(slice.actions.addCreatedThisSession(generatedUid));
   replaceElementWithComponent(element, componentBase);
   trackComponentEvent({
     action: "created",
@@ -2447,11 +2659,11 @@ function createUnpublishedComponent(name, element, eventData, overridableProps,
 }
 
 // src/components/create-component-form/hooks/use-form.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react8.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react8.useState)({});
-  const isValid = (0, import_react8.useMemo)(() => {
+  const [values, setValues] = (0, import_react9.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react9.useState)({});
+  const isValid = (0, import_react9.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -2495,32 +2707,6 @@ var validateForm = (values, schema) => {
   return { success: false, errors };
 };
 
-// src/components/create-component-form/utils/component-form-schema.ts
-var import_schema = require("@elementor/schema");
-var import_i18n17 = require("@wordpress/i18n");
-var MIN_NAME_LENGTH = 2;
-var MAX_NAME_LENGTH = 50;
-var createBaseComponentSchema = (existingNames) => {
-  return import_schema.z.object({
-    componentName: import_schema.z.string().trim().max(
-      MAX_NAME_LENGTH,
-      (0, import_i18n17.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
-    ).refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n17.__)("Component name already exists", "elementor")
-    })
-  });
-};
-var createSubmitComponentSchema = (existingNames) => {
-  const baseSchema = createBaseComponentSchema(existingNames);
-  return baseSchema.extend({
-    componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n17.__)("Component name is required.", "elementor")
-    }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n17.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
-    })
-  });
-};
-
 // src/components/create-component-form/utils/get-component-event-data.ts
 var getComponentEventData = (containerElement, options) => {
   const { elementsCount, componentsCount } = countNestedElements(containerElement);
@@ -2552,11 +2738,11 @@ function countNestedElements(container) {
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
-  const [element, setElement] = (0, import_react9.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react9.useState)();
-  const [resultNotification, setResultNotification] = (0, import_react9.useState)(null);
-  const eventData = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [element, setElement] = (0, import_react10.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react10.useState)();
+  const [resultNotification, setResultNotification] = (0, import_react10.useState)(null);
+  const eventData = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
@@ -2651,14 +2837,14 @@ var Form2 = ({
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
   const { components } = useComponents();
-  const existingComponentNames = (0, import_react9.useMemo)(() => {
+  const existingComponentNames = (0, import_react10.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react9.useMemo)(
+  const changeValidationSchema = (0, import_react10.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react9.useMemo)(
+  const submitValidationSchema = (0, import_react10.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -2703,30 +2889,30 @@ var Form2 = ({
 
 // src/components/edit-component/edit-component.tsx
 var React19 = __toESM(require("react"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_editor_documents10 = require("@elementor/editor-documents");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store42 = require("@elementor/store");
+var import_store49 = require("@elementor/store");
 var import_utils6 = require("@elementor/utils");
 
 // src/store/actions/update-current-component.ts
 var import_editor_documents9 = require("@elementor/editor-documents");
-var import_store40 = require("@elementor/store");
+var import_store47 = require("@elementor/store");
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch16 = (0, import_store40.__getStore)()?.dispatch;
-  if (!dispatch16) {
+  const dispatch18 = (0, import_store47.__getStore)()?.dispatch;
+  if (!dispatch18) {
     return;
   }
-  dispatch16(slice.actions.setPath(path));
-  dispatch16(slice.actions.setCurrentComponentId(currentComponentId));
+  dispatch18(slice.actions.setPath(path));
+  dispatch18(slice.actions.setCurrentComponentId(currentComponentId));
 }
 
 // src/components/edit-component/component-modal.tsx
 var React18 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom = require("react-dom");
 var import_i18n19 = require("@wordpress/i18n");
 
@@ -2738,10 +2924,10 @@ function useCanvasDocument() {
 }
 
 // src/hooks/use-element-rect.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_utils5 = require("@elementor/utils");
 function useElementRect(element) {
-  const [rect, setRect] = (0, import_react10.useState)(new DOMRect(0, 0, 0, 0));
+  const [rect, setRect] = (0, import_react11.useState)(new DOMRect(0, 0, 0, 0));
   const onChange = (0, import_utils5.throttle)(
     () => {
       setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
@@ -2752,7 +2938,7 @@ function useElementRect(element) {
   useScrollListener({ element, onChange });
   useResizeListener({ element, onChange });
   useMutationsListener({ element, onChange });
-  (0, import_react10.useEffect)(
+  (0, import_react11.useEffect)(
     () => () => {
       onChange.cancel();
     },
@@ -2761,7 +2947,7 @@ function useElementRect(element) {
   return rect;
 }
 function useScrollListener({ element, onChange }) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2773,7 +2959,7 @@ function useScrollListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useResizeListener({ element, onChange }) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2788,7 +2974,7 @@ function useResizeListener({ element, onChange }) {
   }, [element, onChange]);
 }
 function useMutationsListener({ element, onChange }) {
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!element) {
       return;
     }
@@ -2803,7 +2989,7 @@ function useMutationsListener({ element, onChange }) {
 // src/components/edit-component/component-modal.tsx
 function ComponentModal({ element, onClose }) {
   const canvasDocument = useCanvasDocument();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleEsc = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -2918,8 +3104,8 @@ function EditComponent() {
 function useHandleDocumentSwitches() {
   const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
   const currentComponentId = useCurrentComponentId();
-  const path = (0, import_store42.__useSelector)(selectPath);
-  (0, import_react12.useEffect)(() => {
+  const path = (0, import_store49.__useSelector)(selectPath);
+  (0, import_react13.useEffect)(() => {
     return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/open"), () => {
       const nextDocument = documentsManager.getCurrent();
       if (nextDocument.id === currentComponentId) {
@@ -2945,14 +3131,31 @@ function getUpdatedComponentPath(path, nextDocument) {
   if (componentIndex >= 0) {
     return path.slice(0, componentIndex + 1);
   }
+  const instanceId = nextDocument?.container.view?.el?.dataset.id;
+  const instanceTitle = getInstanceTitle(instanceId, path);
   return [
     ...path,
     {
-      instanceId: nextDocument?.container.view?.el?.dataset.id,
+      instanceId,
+      instanceTitle,
       componentId: nextDocument.id
     }
   ];
 }
+function getInstanceTitle(instanceId, path) {
+  if (!instanceId) {
+    return void 0;
+  }
+  const documentsManager = (0, import_editor_documents10.getV1DocumentsManager)();
+  const parentDocId = path.at(-1)?.componentId ?? documentsManager.getInitialId();
+  const parentDoc = documentsManager.get(parentDocId);
+  const parentContainer = parentDoc?.container;
+  const widget = parentContainer?.children?.findRecursive?.(
+    (container) => container.id === instanceId
+  );
+  const editorSettings = widget?.model?.get?.("editor_settings");
+  return editorSettings?.title;
+}
 function getComponentDOMElement(id2) {
   if (!id2) {
     return null;
@@ -3085,7 +3288,7 @@ var EmptyState2 = ({ onEditComponent }) => {
 
 // src/components/instance-editing-panel/override-props-group.tsx
 var React24 = __toESM(require("react"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui20 = require("@elementor/ui");
@@ -3128,9 +3331,9 @@ function getControlsByBind(controls) {
 }
 
 // src/store/actions/update-overridable-prop.ts
-var import_store44 = require("@elementor/store");
+var import_store51 = require("@elementor/store");
 function updateOverridableProp(componentId, propValue, originPropFields) {
-  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3154,7 +3357,7 @@ function updateOverridableProp(componentId, propValue, originPropFields) {
       }
     }
   };
-  (0, import_store44.__dispatch)(
+  (0, import_store51.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -3309,7 +3512,7 @@ function OverridePropsGroup({ group, props, overrides }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id2 = (0, import_react13.useId)();
+  const id2 = (0, import_react14.useId)();
   const labelId = `label-${id2}`;
   const contentId = `content-${id2}`;
   const title = group.label;
@@ -3376,12 +3579,12 @@ var import_editor_editing_panel6 = require("@elementor/editor-editing-panel");
 
 // src/provider/overridable-prop-context.tsx
 var React26 = __toESM(require("react"));
-var import_react14 = require("react");
-var OverridablePropContext = (0, import_react14.createContext)(null);
+var import_react15 = require("react");
+var OverridablePropContext = (0, import_react15.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
   return /* @__PURE__ */ React26.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react14.useContext)(OverridablePropContext)?.value;
+var useOverridablePropValue = () => (0, import_react15.useContext)(OverridablePropContext)?.value;
 
 // src/components/overridable-props/overridable-prop-control.tsx
 function OverridablePropControl({
@@ -3439,7 +3642,7 @@ var import_ui23 = require("@elementor/ui");
 var import_i18n24 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store49 = require("@elementor/store");
+var import_store56 = require("@elementor/store");
 var import_utils7 = require("@elementor/utils");
 function setOverridableProp({
   componentId,
@@ -3453,7 +3656,7 @@ function setOverridableProp({
   originValue,
   originPropFields
 }) {
-  const overridableProps = selectOverridableProps((0, import_store49.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store56.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -3490,7 +3693,7 @@ function setOverridableProp({
   if (isChangingGroups) {
     groups = removePropFromGroup(groups, existingOverridableProp.groupId, overridableProp.overrideKey);
   }
-  (0, import_store49.__dispatch)(
+  (0, import_store56.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -3504,7 +3707,7 @@ function setOverridableProp({
 
 // src/components/overridable-props/indicator.tsx
 var React28 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_icons15 = require("@elementor/icons");
 var import_ui22 = require("@elementor/ui");
 var import_i18n23 = require("@wordpress/i18n");
@@ -3563,7 +3766,7 @@ var Content = (0, import_ui22.styled)(import_ui22.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
+var Indicator2 = (0, import_react16.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React28.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React28.createElement(
   IconContainer,
   {
     className: "icon",
@@ -3573,12 +3776,12 @@ var Indicator = (0, import_react15.forwardRef)(({ isOpen, isOverridable, ...prop
 )));
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store51 = require("@elementor/store");
+var import_store58 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store51.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store58.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -3638,7 +3841,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0, import_i18n24.__)("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { placement: "top", title: (0, import_i18n24.__)("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator2, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
     import_ui23.Popover,
     {
       disableScrollLock: true,
@@ -4087,11 +4290,11 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react16 = require("react");
-var import_store54 = require("@elementor/store");
+var import_react17 = require("react");
+var import_store61 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react16.useEffect)(() => {
-    (0, import_store54.__dispatch)(loadComponents());
+  (0, import_react17.useEffect)(() => {
+    (0, import_store61.__dispatch)(loadComponents());
   }, []);
   return null;
 }
@@ -4100,7 +4303,7 @@ function PopulateStore() {
 var import_editor_elements16 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
-var import_store55 = require("@elementor/store");
+var import_store62 = require("@elementor/store");
 var import_i18n25 = require("@wordpress/i18n");
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
@@ -4126,7 +4329,7 @@ function wouldCreateCircularNesting(componentIdToAdd) {
   if (componentIdToAdd === void 0) {
     return false;
   }
-  const state = (0, import_store55.__getState)();
+  const state = (0, import_store62.__getState)();
   const currentComponentId = selectCurrentComponentId(state);
   const path = selectPath(state);
   if (currentComponentId === null) {
@@ -4224,19 +4427,19 @@ function blockCircularPaste(args) {
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store57 = require("@elementor/store");
+var import_store64 = require("@elementor/store");
 function removeComponentStyles(id2) {
   apiClient.invalidateComponentConfigCache(id2);
-  (0, import_store57.__dispatch)(slice.actions.removeStyles({ id: id2 }));
+  (0, import_store64.__dispatch)(slice.actions.removeStyles({ id: id2 }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store59 = require("@elementor/store");
+var import_store66 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store59.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store66.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -4244,29 +4447,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store59.__getState)());
+      return selectFlatStyles((0, import_store66.__getState)());
     },
     get: (id2) => {
-      return selectFlatStyles((0, import_store59.__getState)()).find((style) => style.id === id2) ?? null;
+      return selectFlatStyles((0, import_store66.__getState)()).find((style) => style.id === id2) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
-var import_store61 = require("@elementor/store");
+var import_store68 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store61.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store68.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store61.__dispatch)(
+    (0, import_store68.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -4276,7 +4479,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store61.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store68.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -4336,7 +4539,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store63 = require("@elementor/store");
+var import_store70 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -4344,7 +4547,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store63.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store70.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -4352,7 +4555,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications4 = require("@elementor/editor-notifications");
-var import_store65 = require("@elementor/store");
+var import_store72 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -4365,7 +4568,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store65.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store72.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -4385,6 +4588,19 @@ var updateArchivedComponentBeforeSave = async () => {
   }
 };
 
+// src/sync/update-component-title-before-save.ts
+var import_store74 = require("@elementor/store");
+var updateComponentTitleBeforeSave = async () => {
+  const updatedComponentNames = selectUpdatedComponentNames((0, import_store74.__getState)());
+  if (!updatedComponentNames.length) {
+    return;
+  }
+  const result = await apiClient.updateComponentTitle(updatedComponentNames);
+  if (result.failedIds.length === 0) {
+    (0, import_store74.__dispatch)(slice.actions.cleanUpdatedComponentNames());
+  }
+};
+
 // src/sync/update-components-before-save.ts
 var import_editor_documents11 = require("@elementor/editor-documents");
 async function updateComponentsBeforeSave({ status, elements }) {
@@ -4408,14 +4624,15 @@ var beforeSave = ({ container, status }) => {
     updateArchivedComponentBeforeSave(),
     createComponentsBeforeSave({ elements, status }),
     updateComponentsBeforeSave({ elements, status }),
-    setComponentOverridablePropsSettingsBeforeSave({ container })
+    setComponentOverridablePropsSettingsBeforeSave({ container }),
+    updateComponentTitleBeforeSave()
   ]);
 };
 
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store67.__registerSlice)(slice);
+  (0, import_store76.__registerSlice)(slice);
   (0, import_editor_panels4.__registerPanel)(panel);
   (0, import_editor_canvas9.registerElementType)(
     COMPONENT_WIDGET_TYPE,