@elementor/editor-components 3.33.0-99 → 3.34.2

package/dist/index.mjs

@@ -1,54 +1,864 @@
 // src/init.ts
-import { injectIntoTop } from "@elementor/editor";
+import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
+import {
+  registerElementType,
+  settingsTransformersRegistry as settingsTransformersRegistry2
+} from "@elementor/editor-canvas";
+import { getV1CurrentDocument as getV1CurrentDocument2 } from "@elementor/editor-documents";
+import { FIELD_TYPE, registerFieldIndicator } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
-import { __ as __3 } from "@wordpress/i18n";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
+import { __registerSlice as registerSlice } from "@elementor/store";
+import { __ as __12 } from "@wordpress/i18n";
 
-// src/components/components-tab.tsx
-import * as React from "react";
-import { Box } from "@elementor/ui";
-function ComponentsTab() {
-  return /* @__PURE__ */ React.createElement(Box, { px: 2 }, "This is the Components tab.");
-}
+// src/component-instance-transformer.ts
+import { createTransformer } from "@elementor/editor-canvas";
+import { __getState as getState } from "@elementor/store";
 
-// src/components/create-component-form/create-component-form.tsx
-import * as React2 from "react";
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
-import { getElementLabel } from "@elementor/editor-elements";
-import { ThemeProvider } from "@elementor/editor-ui";
-import { StarIcon } from "@elementor/icons";
-import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+// src/store/store.ts
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice
+} from "@elementor/store";
 
-// src/hooks/use-components.ts
-import { useQuery } from "@elementor/query";
+// src/store/thunks.ts
+import { __createAsyncThunk as createAsyncThunk } from "@elementor/store";
 
 // src/api.ts
+import { ajax } from "@elementor/editor-v1-adapters";
 import { httpService } from "@elementor/http-client";
 var BASE_URL = "elementor/v1/components";
+var LOCK_COMPONENT = `${BASE_URL}/lock`;
+var UNLOCK_COMPONENT = `${BASE_URL}/unlock`;
+var BASE_URL_LOCK_STATUS = `${BASE_URL}/lock-status`;
+var getParams = (id) => ({
+  action: "get_document_config",
+  unique_id: `document-config-${id}`,
+  data: { id }
+});
 var apiClient = {
   get: () => httpService().get(`${BASE_URL}`).then((res) => res.data.data),
-  create: (payload) => httpService().post(`${BASE_URL}`, payload).then((res) => res.data.data)
+  create: (payload) => httpService().post(`${BASE_URL}`, payload).then((res) => res.data.data),
+  updateStatuses: (ids, status) => httpService().put(`${BASE_URL}/status`, {
+    ids,
+    status
+  }),
+  getComponentConfig: (id) => ajax.load(getParams(id)),
+  invalidateComponentConfigCache: (id) => ajax.invalidateCache(getParams(id)),
+  getComponentLockStatus: async (componentId) => await httpService().get(`${BASE_URL_LOCK_STATUS}`, {
+    params: {
+      componentId
+    }
+  }).then((res) => {
+    const { is_current_user_allow_to_edit: isAllowedToSwitchDocument, locked_by: lockedBy } = res.data.data;
+    return { isAllowedToSwitchDocument, lockedBy: lockedBy || "" };
+  }),
+  lockComponent: async (componentId) => await httpService().post(LOCK_COMPONENT, {
+    componentId
+  }).then((res) => res.data),
+  unlockComponent: async (componentId) => await httpService().post(UNLOCK_COMPONENT, {
+    componentId
+  }).then((res) => res.data)
 };
 
+// src/store/thunks.ts
+var loadComponents = createAsyncThunk("components/load", async () => {
+  const response = await apiClient.get();
+  return response;
+});
+
+// src/store/store.ts
+var initialState = {
+  data: [],
+  unpublishedData: [],
+  loadStatus: "idle",
+  styles: {},
+  createdThisSession: [],
+  path: [],
+  currentComponentId: null
+};
+var SLICE_NAME = "components";
+var slice = createSlice({
+  name: SLICE_NAME,
+  initialState,
+  reducers: {
+    add: (state, { payload }) => {
+      if (Array.isArray(payload)) {
+        state.data = [...state.data, ...payload];
+      } else {
+        state.data.unshift(payload);
+      }
+    },
+    load: (state, { payload }) => {
+      state.data = payload;
+    },
+    addUnpublished: (state, { payload }) => {
+      state.unpublishedData.unshift(payload);
+    },
+    resetUnpublished: (state) => {
+      state.unpublishedData = [];
+    },
+    removeStyles(state, { payload }) {
+      const { [payload.id]: _, ...rest } = state.styles;
+      state.styles = rest;
+    },
+    addStyles: (state, { payload }) => {
+      state.styles = { ...state.styles, ...payload };
+    },
+    addCreatedThisSession: (state, { payload }) => {
+      state.createdThisSession.push(payload);
+    },
+    setCurrentComponentId: (state, { payload }) => {
+      state.currentComponentId = payload;
+    },
+    setPath: (state, { payload }) => {
+      state.path = payload;
+    },
+    setOverridableProps: (state, { payload }) => {
+      const component = state.data.find((comp) => comp.id === payload.componentId);
+      if (!component) {
+        return;
+      }
+      component.overridableProps = payload.overridableProps;
+    }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(loadComponents.fulfilled, (state, { payload }) => {
+      state.data = payload;
+      state.loadStatus = "idle";
+    });
+    builder.addCase(loadComponents.pending, (state) => {
+      state.loadStatus = "pending";
+    });
+    builder.addCase(loadComponents.rejected, (state) => {
+      state.loadStatus = "error";
+    });
+  }
+});
+var selectData = (state) => state[SLICE_NAME].data;
+var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
+var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
+var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
+var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
+var getPath = (state) => state[SLICE_NAME].path;
+var getCurrentComponentId = (state) => state[SLICE_NAME].currentComponentId;
+var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
+var selectComponents = createSelector(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => [
+    ...unpublishedData.map((item) => ({ uid: item.uid, name: item.name })),
+    ...data
+  ]
+);
+var selectUnpublishedComponents = createSelector(
+  selectUnpublishedData,
+  (unpublishedData) => unpublishedData
+);
+var selectLoadIsPending = createSelector(selectLoadStatus, (status) => status === "pending");
+var selectLoadIsError = createSelector(selectLoadStatus, (status) => status === "error");
+var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
+var selectFlatStyles = createSelector(selectStylesDefinitions, (data) => Object.values(data).flat());
+var selectCreatedThisSession = createSelector(
+  getCreatedThisSession,
+  (createdThisSession) => createdThisSession
+);
+var DEFAULT_OVERRIDABLE_PROPS = {
+  props: {},
+  groups: {
+    items: {},
+    order: []
+  }
+};
+var selectOverridableProps = createSelector(
+  selectComponent,
+  (component) => {
+    if (!component) {
+      return void 0;
+    }
+    return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
+  }
+);
+var selectPath = createSelector(getPath, (path) => path);
+var selectCurrentComponentId = createSelector(
+  getCurrentComponentId,
+  (currentComponentId) => currentComponentId
+);
+
+// src/utils/component-document-data.ts
+import { getV1DocumentsManager } from "@elementor/editor-documents";
+var getComponentDocumentData = async (id) => {
+  const documentManager = getV1DocumentsManager();
+  try {
+    return await documentManager.request(id);
+  } catch {
+    return null;
+  }
+};
+var invalidateComponentDocumentData = (id) => {
+  const documentManager = getV1DocumentsManager();
+  documentManager.invalidateCache(id);
+};
+
+// src/component-instance-transformer.ts
+var componentInstanceTransformer = createTransformer(
+  async ({ component_id: id }) => {
+    const unpublishedComponents = selectUnpublishedComponents(getState());
+    const unpublishedComponent = unpublishedComponents.find(({ uid }) => uid === id);
+    if (unpublishedComponent) {
+      return structuredClone(unpublishedComponent.elements);
+    }
+    if (typeof id !== "number") {
+      throw new Error(`Component ID "${id}" not found.`);
+    }
+    const data = await getComponentDocumentData(id);
+    return data?.elements ?? [];
+  }
+);
+
+// src/component-overridable-transformer.ts
+import { createTransformer as createTransformer2, settingsTransformersRegistry } from "@elementor/editor-canvas";
+var componentOverridableTransformer = createTransformer2(
+  async (value, options) => {
+    return await transformOriginValue(value, options);
+  }
+);
+async function transformOriginValue(value, options) {
+  if (!value.origin_value || !value.origin_value.value || !value.origin_value.$$type) {
+    return null;
+  }
+  const transformer = settingsTransformersRegistry.get(value.origin_value.$$type);
+  if (!transformer) {
+    return null;
+  }
+  try {
+    return await transformer(value.origin_value.value, options);
+  } catch {
+    return null;
+  }
+}
+
+// src/components/components-tab/components.tsx
+import * as React6 from "react";
+import { ThemeProvider } from "@elementor/editor-ui";
+
+// src/components/components-tab/component-search.tsx
+import * as React2 from "react";
+import { SearchIcon } from "@elementor/icons";
+import { Box, InputAdornment, Stack, TextField } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+
+// src/components/components-tab/search-provider.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+import { useSearchState } from "@elementor/utils";
+var SearchContext = createContext(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = useSearchState({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider");
+  }
+  return context;
+};
+
+// src/components/components-tab/component-search.tsx
+var ComponentSearch = () => {
+  const { inputValue, handleChange } = useSearch();
+  return /* @__PURE__ */ React2.createElement(Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
+    TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: __("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React2.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(SearchIcon, { fontSize: "tiny" }))
+      }
+    }
+  )));
+};
+
+// src/components/components-tab/components-list.tsx
+import * as React5 from "react";
+import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
+import { Box as Box4, Divider, Icon, Link, List, Stack as Stack3, Typography as Typography2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
 // src/hooks/use-components.ts
-var COMPONENTS_QUERY_KEY = "components";
+import { __useSelector as useSelector } from "@elementor/store";
 var useComponents = () => {
-  return useQuery({
-    queryKey: [COMPONENTS_QUERY_KEY],
-    queryFn: apiClient.get,
-    staleTime: Infinity
+  const components = useSelector(selectComponents);
+  const isLoading = useSelector(selectLoadIsPending);
+  return { components, isLoading };
+};
+
+// src/components/components-tab/components-item.tsx
+import * as React3 from "react";
+import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
+import { dropElement } from "@elementor/editor-elements";
+import { ComponentsIcon } from "@elementor/icons";
+import { Box as Box2, ListItemButton, ListItemIcon, ListItemText, Typography } from "@elementor/ui";
+
+// src/store/load-components-assets.ts
+import { isDocumentDirty, setDocumentModifiedStatus } from "@elementor/editor-documents";
+
+// src/create-component-type.ts
+import {
+  createTemplatedElementView
+} from "@elementor/editor-canvas";
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+import { __ as __2 } from "@wordpress/i18n";
+
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/mixpanel";
+import { __getState as getState2 } from "@elementor/store";
+var trackComponentEvent = ({ action, ...data }) => {
+  const { dispatchEvent, config } = 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(getState2());
+  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 TYPE = "e-component";
+function createComponentType(options) {
+  const legacyWindow = window;
+  return class extends legacyWindow.elementor.modules.elements.types.Widget {
+    getType() {
+      return options.type;
+    }
+    getView() {
+      return createComponentView(options);
+    }
+  };
+}
+function createComponentView(options) {
+  return class extends createTemplatedElementView(options) {
+    legacyWindow = window;
+    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    isComponentCurrentlyEdited() {
+      const currentDocument = getCurrentDocument();
+      return currentDocument?.id === this.getComponentId();
+    }
+    afterSettingsResolve(settings) {
+      if (settings.component_instance) {
+        this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
+          settings.component_instance
+        );
+        this.collection.models.forEach(setInactiveRecursively);
+        settings.component_instance = "<template data-children-placeholder></template>";
+      }
+      return settings;
+    }
+    getDomElement() {
+      return this.children.findByIndex(0)?.getDomElement() ?? this.$el;
+    }
+    attachBuffer(collectionView, buffer) {
+      const childrenPlaceholder = collectionView.$el.find("[data-children-placeholder]").get(0);
+      if (!childrenPlaceholder) {
+        super.attachBuffer(collectionView, buffer);
+        return;
+      }
+      childrenPlaceholder.replaceWith(buffer);
+    }
+    getComponentId() {
+      const componentInstance = this.options?.model?.get("settings")?.get("component_instance")?.value;
+      return componentInstance.component_id;
+    }
+    getContextMenuGroups() {
+      const filteredGroups = super.getContextMenuGroups().filter((group) => group.name !== "save");
+      const componentId = this.getComponentId();
+      if (!componentId) {
+        return filteredGroups;
+      }
+      const newGroup = [
+        {
+          name: "edit component",
+          actions: [
+            {
+              name: "edit component",
+              icon: "eicon-edit",
+              title: () => __2("Edit Component", "elementor"),
+              isEnabled: () => true,
+              callback: (_, eventData) => this.editComponent(eventData)
+            }
+          ]
+        }
+      ];
+      return [...filteredGroups, ...newGroup];
+    }
+    async switchDocument() {
+      const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(
+        this.getComponentId()
+      );
+      if (!isAllowedToSwitchDocument) {
+        options.showLockedByModal?.(lockedBy || "");
+      } else {
+        runCommand("editor/documents/switch", {
+          id: this.getComponentId(),
+          mode: "autosave",
+          selector: `[data-id="${this.model.get("id")}"]`,
+          shouldScroll: false
+        });
+      }
+    }
+    editComponent({ trigger, location, secondaryLocation }) {
+      if (this.isComponentCurrentlyEdited()) {
+        return;
+      }
+      this.switchDocument();
+      const editorSettings = this.model.get("editor_settings");
+      trackComponentEvent({
+        action: "edited",
+        component_uid: editorSettings?.component_uid,
+        component_name: editorSettings?.title,
+        location,
+        secondary_location: secondaryLocation,
+        trigger
+      });
+    }
+    handleDblClick(e) {
+      e.stopPropagation();
+      const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+      this.editComponent({
+        trigger: triggers.doubleClick,
+        location: locations.canvas,
+        secondaryLocation: secondaryLocations.canvasElement
+      });
+    }
+    events() {
+      return {
+        ...super.events(),
+        dblclick: this.handleDblClick
+      };
+    }
+    attributes() {
+      return {
+        ...super.attributes(),
+        "data-elementor-id": this.getComponentId()
+      };
+    }
+  };
+}
+function setInactiveRecursively(model) {
+  const editSettings = model.get("editSettings");
+  if (editSettings) {
+    editSettings.set("inactive", true);
+  }
+  const elements = model.get("elements");
+  if (elements) {
+    elements.forEach((childModel) => {
+      setInactiveRecursively(childModel);
+    });
+  }
+}
+
+// src/utils/get-component-ids.ts
+var getComponentIds = async (elements) => {
+  const components = elements.map(async ({ widgetType, elType, elements: childElements, settings }) => {
+    const ids = [];
+    const isComponent = [widgetType, elType].includes(TYPE);
+    if (isComponent) {
+      const componentId = settings?.component_instance?.value?.component_id;
+      const document = await getComponentDocumentData(componentId);
+      childElements = document?.elements;
+      if (Boolean(componentId)) {
+        ids.push(componentId);
+      }
+    }
+    if (!!childElements?.length) {
+      ids.push(...await getComponentIds(childElements));
+    }
+    return ids;
   });
+  const result = (await Promise.all(components)).flat();
+  return Array.from(new Set(result));
 };
 
-// src/hooks/use-create-component.ts
-import { useMutation, useQueryClient } from "@elementor/query";
-var useCreateComponentMutation = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: apiClient.create,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: [COMPONENTS_QUERY_KEY] })
+// src/store/load-components-styles.ts
+import { __dispatch as dispatch, __getState as getState3 } from "@elementor/store";
+async function loadComponentsStyles(componentIds) {
+  if (!componentIds.length) {
+    return;
+  }
+  const knownComponents = selectStyles(getState3());
+  const unknownComponentIds = componentIds.filter((id) => !knownComponents[id]);
+  if (!unknownComponentIds.length) {
+    return;
+  }
+  addComponentStyles(unknownComponentIds);
+}
+async function addComponentStyles(ids) {
+  const newComponents = await loadStyles(ids);
+  addStyles(newComponents);
+}
+async function loadStyles(ids) {
+  return Promise.all(ids.map(async (id) => [id, await apiClient.getComponentConfig(id)]));
+}
+function addStyles(data) {
+  const styles = Object.fromEntries(
+    data.map(([componentId, componentData]) => [componentId, extractStyles(componentData)])
+  );
+  dispatch(slice.actions.addStyles(styles));
+}
+function extractStyles(element) {
+  return [...Object.values(element.styles ?? {}), ...(element.elements ?? []).flatMap(extractStyles)];
+}
+
+// src/store/load-components-assets.ts
+async function loadComponentsAssets(elements) {
+  const componentIds = await getComponentIds(elements);
+  updateDocumentState(componentIds);
+  return loadComponentsStyles(componentIds);
+}
+async function updateDocumentState(componentIds) {
+  const components = (await Promise.all(componentIds.map(getComponentDocumentData))).filter(
+    (document) => !!document
+  );
+  const isDrafted = components.some(isDocumentDirty);
+  if (isDrafted) {
+    setDocumentModifiedStatus(true);
+  }
+}
+
+// src/utils/get-container-for-new-element.ts
+import {
+  getContainer,
+  getCurrentDocumentContainer,
+  getSelectedElements
+} from "@elementor/editor-elements";
+var getContainerForNewElement = () => {
+  const currentDocumentContainer = getCurrentDocumentContainer();
+  const selectedElement = getSelectedElementContainer();
+  let container, options;
+  if (selectedElement) {
+    switch (selectedElement.model.get("elType")) {
+      case "widget": {
+        container = selectedElement?.parent;
+        const selectedElIndex = selectedElement.view?._index ?? -1;
+        if (selectedElIndex > -1) {
+          options = { at: selectedElIndex + 1 };
+        }
+        break;
+      }
+      case "section": {
+        container = selectedElement?.children?.[0];
+        break;
+      }
+      default: {
+        container = selectedElement;
+        break;
+      }
+    }
+  }
+  return { container: container ?? currentDocumentContainer, options };
+};
+function getSelectedElementContainer() {
+  const selectedElements = getSelectedElements();
+  if (selectedElements.length !== 1) {
+    return void 0;
+  }
+  return getContainer(selectedElements[0].id);
+}
+
+// src/components/create-component-form/utils/replace-element-with-component.ts
+import { replaceElement } from "@elementor/editor-elements";
+var replaceElementWithComponent = (element, component) => {
+  replaceElement({
+    currentElement: element,
+    newElement: createComponentModel(component),
+    withHistory: false
   });
 };
+var createComponentModel = (component) => {
+  return {
+    elType: "widget",
+    widgetType: "e-component",
+    settings: {
+      component_instance: {
+        $$type: "component-instance",
+        value: {
+          component_id: component.id ?? component.uid
+        }
+      }
+    },
+    editor_settings: {
+      title: component.name,
+      component_uid: component.uid
+    }
+  };
+};
+
+// src/components/components-tab/components-item.tsx
+var ComponentItem = ({ component }) => {
+  const componentModel = createComponentModel(component);
+  const handleClick = () => {
+    addComponentToPage(componentModel);
+  };
+  const handleDragEnd = () => {
+    loadComponentsAssets([componentModel]);
+    endDragElementFromPanel();
+  };
+  return /* @__PURE__ */ React3.createElement(
+    ListItemButton,
+    {
+      draggable: true,
+      onDragStart: () => startDragElementFromPanel(componentModel),
+      onDragEnd: handleDragEnd,
+      shape: "rounded",
+      sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
+    },
+    /* @__PURE__ */ React3.createElement(Box2, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React3.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React3.createElement(ComponentsIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
+      ListItemText,
+      {
+        primary: /* @__PURE__ */ React3.createElement(Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
+      }
+    ))
+  );
+};
+var addComponentToPage = (model) => {
+  const { container, options } = getContainerForNewElement();
+  if (!container) {
+    throw new Error(`Can't find container to drop new component instance at`);
+  }
+  loadComponentsAssets([model]);
+  dropElement({
+    containerId: container.id,
+    model,
+    options: { ...options, useHistory: false, scrollIntoView: true }
+  });
+};
+
+// src/components/components-tab/loading-components.tsx
+import * as React4 from "react";
+import { Box as Box3, ListItemButton as ListItemButton2, Skeleton, Stack as Stack2 } from "@elementor/ui";
+var ROWS_COUNT = 6;
+var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
+var LoadingComponents = () => {
+  return /* @__PURE__ */ React4.createElement(
+    Stack2,
+    {
+      "aria-label": "Loading components",
+      gap: 1,
+      sx: {
+        pointerEvents: "none",
+        position: "relative",
+        maxHeight: "300px",
+        overflow: "hidden",
+        "&:after": {
+          position: "absolute",
+          top: 0,
+          content: '""',
+          left: 0,
+          width: "100%",
+          height: "300px",
+          background: "linear-gradient(to top, white, transparent)",
+          pointerEvents: "none"
+        }
+      }
+    },
+    rows.map((row) => /* @__PURE__ */ React4.createElement(
+      ListItemButton2,
+      {
+        key: row,
+        sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
+        shape: "rounded"
+      },
+      /* @__PURE__ */ React4.createElement(Box3, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React4.createElement(Skeleton, { variant: "text", width: "100%", height: "36px" }))
+    ))
+  );
+};
+
+// src/components/components-tab/components-list.tsx
+function ComponentsList() {
+  const { components, isLoading, searchValue } = useFilteredComponents();
+  if (isLoading) {
+    return /* @__PURE__ */ React5.createElement(LoadingComponents, null);
+  }
+  const isEmpty = !components || components.length === 0;
+  if (isEmpty) {
+    if (searchValue.length > 0) {
+      return /* @__PURE__ */ React5.createElement(EmptySearchResult, null);
+    }
+    return /* @__PURE__ */ React5.createElement(EmptyState, null);
+  }
+  return /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 1, px: 2 } }, components.map((component) => /* @__PURE__ */ React5.createElement(ComponentItem, { key: component.uid, component })));
+}
+var EmptyState = () => {
+  return /* @__PURE__ */ React5.createElement(
+    Stack3,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      sx: { px: 2.5, pt: 10 },
+      gap: 1.75,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React5.createElement(Icon, { fontSize: "large" }, /* @__PURE__ */ React5.createElement(EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, __3("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", align: "center", color: "text.secondary" }, __3(
+      "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React5.createElement(Divider, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React5.createElement(Typography2, { align: "left", variant: "caption", color: "text.secondary" }, __3("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React5.createElement(
+      Typography2,
+      {
+        align: "left",
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "flex", flexDirection: "column" }
+      },
+      /* @__PURE__ */ React5.createElement("span", null, __3("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, __3("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, __3("3. Use the component icon in the Edit panel header", "elementor"))
+    )
+  );
+};
+var EmptySearchResult = () => {
+  const { searchValue, clearSearch } = useSearch();
+  return /* @__PURE__ */ React5.createElement(
+    Stack3,
+    {
+      color: "text.secondary",
+      pt: 5,
+      alignItems: "center",
+      gap: 1,
+      overflow: "hidden",
+      justifySelf: "center"
+    },
+    /* @__PURE__ */ React5.createElement(ComponentsIcon2, null),
+    /* @__PURE__ */ React5.createElement(
+      Box4,
+      {
+        sx: {
+          width: "100%"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "subtitle2", color: "inherit" }, __3("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React5.createElement(
+        Typography2,
+        {
+          variant: "subtitle2",
+          color: "inherit",
+          sx: {
+            display: "flex",
+            width: "100%",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ React5.createElement("span", null, "\u201C"),
+        /* @__PURE__ */ React5.createElement(
+          "span",
+          {
+            style: {
+              maxWidth: "80%",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          },
+          searchValue
+        ),
+        /* @__PURE__ */ React5.createElement("span", null, "\u201D.")
+      )
+    ),
+    /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "caption", color: "inherit" }, __3("Try something else.", "elementor")),
+    /* @__PURE__ */ React5.createElement(Typography2, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React5.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, __3("Clear & try again", "elementor")))
+  );
+};
+var useFilteredComponents = () => {
+  const { components, isLoading } = useComponents();
+  const { searchValue } = useSearch();
+  return {
+    components: components.filter(
+      (component) => component.name.toLowerCase().includes(searchValue.toLowerCase())
+    ),
+    isLoading,
+    searchValue
+  };
+};
+
+// src/components/components-tab/components.tsx
+var Components = () => {
+  return /* @__PURE__ */ React6.createElement(ThemeProvider, null, /* @__PURE__ */ React6.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React6.createElement(ComponentSearch, null), /* @__PURE__ */ React6.createElement(ComponentsList, null)));
+};
+
+// src/components/consts.ts
+var COMPONENT_DOCUMENT_TYPE = "elementor_component";
+
+// src/components/create-component-form/create-component-form.tsx
+import * as React7 from "react";
+import { useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { getElementLabel } from "@elementor/editor-elements";
+import { Form as FormElement, ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
+import { StarIcon } from "@elementor/icons";
+import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack4, TextField as TextField2, Typography as Typography3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
+// src/store/create-unpublished-component.ts
+import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
+import { __dispatch as dispatch2 } from "@elementor/store";
+import { generateUniqueId } from "@elementor/utils";
+function createUnpublishedComponent(name, element, eventData) {
+  const uid = generateUniqueId("component");
+  const componentBase = { uid, name };
+  dispatch2(
+    slice.actions.addUnpublished({
+      ...componentBase,
+      elements: [element]
+    })
+  );
+  dispatch2(slice.actions.addCreatedThisSession(uid));
+  replaceElementWithComponent(element, componentBase);
+  trackComponentEvent({
+    action: "created",
+    component_uid: uid,
+    component_name: name,
+    ...eventData
+  });
+  runCommand2("document/save/auto");
+  return uid;
+}
 
 // src/components/create-component-form/hooks/use-form.ts
 import { useMemo, useState } from "react";
@@ -101,16 +911,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: z.string().trim().max(
       MAX_NAME_LENGTH,
-      __("Component name is too long. Please keep it under 50 characters.", "elementor")
+      __4("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: __("Component name already exists", "elementor")
+      message: __4("Component name already exists", "elementor")
     })
   });
 };
@@ -118,103 +928,114 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __("Component name is required.", "elementor")
+      message: __4("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __4("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
 
-// src/components/create-component-form/utils/replace-element-with-component.ts
-import { replaceElement } from "@elementor/editor-elements";
-import { numberPropTypeUtil } from "@elementor/editor-props";
-var replaceElementWithComponent = async (element, componentId) => {
-  replaceElement({
-    currentElement: element,
-    newElement: {
-      elType: "widget",
-      widgetType: "e-component",
-      settings: {
-        component_id: numberPropTypeUtil.create(componentId)
-      }
-    },
-    withHistory: false
-  });
+// src/components/create-component-form/utils/get-component-event-data.ts
+var getComponentEventData = (containerElement, options) => {
+  const { elementsCount, componentsCount } = countNestedElements(containerElement);
+  return {
+    nested_elements_count: elementsCount,
+    nested_components_count: componentsCount,
+    top_element_type: containerElement.elType,
+    location: options?.location,
+    secondary_location: options?.secondaryLocation,
+    trigger: options?.trigger
+  };
 };
+function countNestedElements(container) {
+  if (!container.elements || container.elements.length === 0) {
+    return { elementsCount: 0, componentsCount: 0 };
+  }
+  let elementsCount = container.elements.length;
+  let componentsCount = 0;
+  for (const element of container.elements) {
+    if (element.widgetType === "e-component") {
+      componentsCount++;
+    }
+    const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } = countNestedElements(element);
+    elementsCount += nestedElementsCount;
+    componentsCount += nestedComponentsCount;
+  }
+  return { elementsCount, componentsCount };
+}
 
 // src/components/create-component-form/create-component-form.tsx
 function CreateComponentForm() {
   const [element, setElement] = useState2(null);
   const [anchorPosition, setAnchorPosition] = useState2();
   const [resultNotification, setResultNotification] = useState2(null);
-  const { mutate: createComponent, isPending } = useCreateComponentMutation();
+  const eventData = useRef(null);
   useEffect(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
       setElement({ element: event.detail.element, elementLabel: getElementLabel(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
+      eventData.current = getComponentEventData(event.detail.element, event.detail.options);
+      trackComponentEvent({
+        action: "createClicked",
+        ...eventData.current
+      });
     };
     window.addEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     return () => {
       window.removeEventListener(OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup);
     };
   }, []);
-  const handleSave = async (values) => {
-    if (!element) {
-      throw new Error(`Can't save element as component: element not found`);
-    }
-    createComponent(
-      {
-        name: values.componentName,
-        content: [element.element.model.toJSON({ remove: ["default"] })]
-      },
-      {
-        onSuccess: (result) => {
-          if (!element) {
-            throw new Error(`Can't replace element with component: element not found`);
-          }
-          replaceElementWithComponent(element.element, result.component_id);
-          setResultNotification({
-            show: true,
-            // Translators: %1$s: Component name, %2$s: Component ID
-            message: __2("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
-            type: "success"
-          });
-          resetAndClosePopup();
-        },
-        onError: () => {
-          const errorMessage = __2("Failed to save component. Please try again.", "elementor");
-          setResultNotification({
-            show: true,
-            message: errorMessage,
-            type: "error"
-          });
-        }
+  const handleSave = (values) => {
+    try {
+      if (!element) {
+        throw new Error(`Can't save element as component: element not found`);
       }
-    );
+      const uid = createUnpublishedComponent(values.componentName, element.element, eventData.current);
+      setResultNotification({
+        show: true,
+        // Translators: %1$s: Component name, %2$s: Component UID
+        message: __5("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
+        type: "success"
+      });
+      resetAndClosePopup();
+    } catch {
+      const errorMessage = __5("Failed to save component. Please try again.", "elementor");
+      setResultNotification({
+        show: true,
+        message: errorMessage,
+        type: "error"
+      });
+    }
   };
   const resetAndClosePopup = () => {
     setElement(null);
     setAnchorPosition(void 0);
   };
-  return /* @__PURE__ */ React2.createElement(ThemeProvider, null, /* @__PURE__ */ React2.createElement(
+  const cancelSave = () => {
+    resetAndClosePopup();
+    trackComponentEvent({
+      action: "createCancelled",
+      ...eventData.current
+    });
+  };
+  return /* @__PURE__ */ React7.createElement(ThemeProvider2, null, /* @__PURE__ */ React7.createElement(
     Popover,
     {
       open: element !== null,
-      onClose: resetAndClosePopup,
+      onClose: cancelSave,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React2.createElement(
+    element !== null && /* @__PURE__ */ React7.createElement(
       Form,
       {
         initialValues: { componentName: element.elementLabel },
         handleSave,
-        isSubmitting: isPending,
-        closePopup: resetAndClosePopup
+        closePopup: cancelSave
       }
     )
-  ), /* @__PURE__ */ React2.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React7.createElement(Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React7.createElement(
     Alert,
     {
       onClose: () => setResultNotification(null),
@@ -228,11 +1049,10 @@ var FONT_SIZE = "tiny";
 var Form = ({
   initialValues,
   handleSave,
-  isSubmitting,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
-  const { data: components } = useComponents();
+  const { components } = useComponents();
   const existingComponentNames = useMemo2(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
@@ -250,8 +1070,15 @@ var Form = ({
       handleSave(parsedValues);
     }
   };
-  return /* @__PURE__ */ React2.createElement(Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React2.createElement(
-    Stack,
+  const texts = {
+    heading: __5("Save as a component", "elementor"),
+    name: __5("Name", "elementor"),
+    cancel: __5("Cancel", "elementor"),
+    create: __5("Create", "elementor")
+  };
+  const nameInputId = "component-name";
+  return /* @__PURE__ */ React7.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React7.createElement(Stack4, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React7.createElement(
+    Stack4,
     {
       direction: "row",
       alignItems: "center",
@@ -259,12 +1086,12 @@ var Form = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React2.createElement(StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React2.createElement(Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, __2("Save as a component", "elementor"))
-  ), /* @__PURE__ */ React2.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(FormLabel, { htmlFor: "component-name", size: "tiny" }, __2("Name", "elementor"))), /* @__PURE__ */ React2.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    TextField,
+    /* @__PURE__ */ React7.createElement(StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React7.createElement(Typography3, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React7.createElement(Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React7.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(
+    TextField2,
     {
-      id: "component-name",
+      id: nameInputId,
       size: FONT_SIZE,
       fullWidth: true,
       value: values.componentName,
@@ -273,30 +1100,956 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React2.createElement(Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, __2("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(
-    Button,
+  ))), /* @__PURE__ */ React7.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React7.createElement(Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+};
+
+// src/components/edit-component/edit-component.tsx
+import * as React9 from "react";
+import { useCallback, useEffect as useEffect4 } from "react";
+import { getV1DocumentsManager as getV1DocumentsManager2 } from "@elementor/editor-documents";
+import {
+  __privateListenTo as listenTo,
+  __privateRunCommand as runCommand3,
+  commandEndEvent as commandEndEvent2
+} from "@elementor/editor-v1-adapters";
+import { __useSelector as useSelector2 } from "@elementor/store";
+
+// src/store/actions.ts
+import { __getStore as getStore } from "@elementor/store";
+function updateCurrentComponent({
+  path,
+  currentComponentId
+}) {
+  const dispatch7 = getStore()?.dispatch;
+  if (!dispatch7) {
+    return;
+  }
+  dispatch7(slice.actions.setPath(path));
+  dispatch7(slice.actions.setCurrentComponentId(currentComponentId));
+}
+
+// src/components/edit-component/component-modal.tsx
+import * as React8 from "react";
+import { useEffect as useEffect3 } from "react";
+import { createPortal } from "react-dom";
+import { __ as __6 } from "@wordpress/i18n";
+
+// src/hooks/use-canvas-document.ts
+import { getCanvasIframeDocument } from "@elementor/editor-canvas";
+import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+function useCanvasDocument() {
+  return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument());
+}
+
+// src/hooks/use-element-rect.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { throttle } from "@elementor/utils";
+function useElementRect(element) {
+  const [rect, setRect] = useState3(new DOMRect(0, 0, 0, 0));
+  const onChange = throttle(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  useEffect2(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("scroll", onChange, { passive: true });
+    return () => {
+      win?.removeEventListener("scroll", onChange);
+    };
+  }, [element, onChange]);
+}
+function useResizeListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(onChange);
+    resizeObserver.observe(element);
+    const win = element.ownerDocument?.defaultView;
+    win?.addEventListener("resize", onChange, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      win?.removeEventListener("resize", onChange);
+    };
+  }, [element, onChange]);
+}
+function useMutationsListener({ element, onChange }) {
+  useEffect2(() => {
+    if (!element) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(onChange);
+    mutationObserver.observe(element, { childList: true, subtree: true });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [element, onChange]);
+}
+
+// src/components/edit-component/component-modal.tsx
+function ComponentModal({ element, onClose }) {
+  const canvasDocument = useCanvasDocument();
+  useEffect3(() => {
+    const handleEsc = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    canvasDocument?.body.addEventListener("keydown", handleEsc);
+    return () => {
+      canvasDocument?.body.removeEventListener("keydown", handleEsc);
+    };
+  }, [canvasDocument, onClose]);
+  if (!canvasDocument?.body) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(BlockEditPage, null), /* @__PURE__ */ React8.createElement(Backdrop, { canvas: canvasDocument, element, onClose })),
+    canvasDocument.body
+  );
+}
+function Backdrop({ canvas, element, onClose }) {
+  const rect = useElementRect(element);
+  const backdropStyle = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999,
+    pointerEvents: "painted",
+    cursor: "pointer",
+    clipPath: getRoundedRectPath(rect, canvas.defaultView, 5)
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ React8.createElement(
+    "div",
     {
-      onClick: handleSubmit,
-      disabled: isSubmitting || !isValid,
-      variant: "contained",
-      color: "primary",
-      size: "small"
+      style: backdropStyle,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": __6("Exit component editing mode", "elementor")
+    }
+  );
+}
+function getRoundedRectPath(rect, viewport, borderRadius) {
+  const padding = borderRadius / 2;
+  const { x: originalX, y: originalY, width: originalWidth, height: originalHeight } = rect;
+  const x = originalX - padding;
+  const y = originalY - padding;
+  const width = originalWidth + 2 * padding;
+  const height = originalHeight + 2 * padding;
+  const radius = Math.min(borderRadius, width / 2, height / 2);
+  const { innerWidth: vw, innerHeight: vh } = viewport;
+  const path = `path(evenodd, 'M 0 0 
+		L ${vw} 0
+		L ${vw} ${vh}
+		L 0 ${vh}
+		Z
+		M ${x + radius} ${y}
+		L ${x + width - radius} ${y}
+		A ${radius} ${radius} 0 0 1 ${x + width} ${y + radius}
+		L ${x + width} ${y + height - radius}
+		A ${radius} ${radius} 0 0 1 ${x + width - radius} ${y + height}
+		L ${x + radius} ${y + height}
+		A ${radius} ${radius} 0 0 1 ${x} ${y + height - radius}
+		L ${x} ${y + radius}
+		A ${radius} ${radius} 0 0 1 ${x + radius} ${y}
+    	Z'
+	)`;
+  return path.replace(/\s{2,}/g, " ");
+}
+function BlockEditPage() {
+  const blockV3DocumentHandlesStyles = `
+	.elementor-editor-active {
+		& .elementor-section-wrap.ui-sortable {
+			display: contents;
+		}
+
+		& *[data-editable-elementor-document]:not(.elementor-edit-mode):hover {
+			& .elementor-document-handle:not(.elementor-document-save-back-handle) {
+				display: none;
+
+				&::before,
+				& .elementor-document-handle__inner {
+					display: none;
+				}
+			}
+		}
+	}
+	`;
+  return /* @__PURE__ */ React8.createElement("style", { "data-e-style-id": "e-block-v3-document-handles-styles" }, blockV3DocumentHandlesStyles);
+}
+
+// src/components/edit-component/edit-component.tsx
+function EditComponent() {
+  const { path, currentComponentId } = useCurrentComponent();
+  useHandleDocumentSwitches();
+  const onBack = useNavigateBack(path);
+  const elementDom = getComponentDOMElement(currentComponentId ?? void 0);
+  if (!elementDom) {
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(ComponentModal, { element: elementDom, onClose: onBack });
+}
+function useHandleDocumentSwitches() {
+  const documentsManager = getV1DocumentsManager2();
+  const { path, currentComponentId } = useCurrentComponent();
+  useEffect4(() => {
+    return listenTo(commandEndEvent2("editor/documents/attach-preview"), () => {
+      const nextDocument = documentsManager.getCurrent();
+      if (nextDocument.id === currentComponentId) {
+        return;
+      }
+      if (currentComponentId) {
+        apiClient.unlockComponent(currentComponentId);
+      }
+      const isComponent = nextDocument.config.type === COMPONENT_DOCUMENT_TYPE;
+      if (!isComponent) {
+        updateCurrentComponent({ path: [], currentComponentId: null });
+        return;
+      }
+      updateCurrentComponent({
+        path: getUpdatedComponentPath(path, nextDocument),
+        currentComponentId: nextDocument.id
+      });
+    });
+  }, [path, documentsManager, currentComponentId]);
+}
+function getUpdatedComponentPath(path, nextDocument) {
+  const componentIndex = path.findIndex(({ componentId }) => componentId === nextDocument.id);
+  if (componentIndex >= 0) {
+    return path.slice(0, componentIndex + 1);
+  }
+  return [
+    ...path,
+    {
+      instanceId: nextDocument?.container.view?.el?.dataset.id,
+      componentId: nextDocument.id
+    }
+  ];
+}
+function useNavigateBack(path) {
+  const documentsManager = getV1DocumentsManager2();
+  return useCallback(() => {
+    const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
+    const switchToDocument = (id, selector) => {
+      runCommand3("editor/documents/switch", {
+        id,
+        selector,
+        mode: "autosave",
+        setAsInitial: false,
+        shouldScroll: false
+      });
+    };
+    if (prevComponentId && prevComponentInstanceId) {
+      switchToDocument(prevComponentId, `[data-id="${prevComponentInstanceId}"]`);
+      return;
+    }
+    switchToDocument(documentsManager.getInitialId());
+  }, [path, documentsManager]);
+}
+function useCurrentComponent() {
+  const path = useSelector2(selectPath);
+  const currentComponentId = useSelector2(selectCurrentComponentId);
+  return {
+    path,
+    currentComponentId
+  };
+}
+function getComponentDOMElement(id) {
+  if (!id) {
+    return null;
+  }
+  const documentsManager = getV1DocumentsManager2();
+  const currentComponent = documentsManager.get(id);
+  const widget = currentComponent?.container;
+  const elementDom = widget?.children?.[0].view?.el;
+  return elementDom ?? null;
+}
+
+// src/components/in-edit-mode.tsx
+import * as React10 from "react";
+import { closeDialog, openDialog } from "@elementor/editor-ui";
+import { InfoCircleFilledIcon } from "@elementor/icons";
+import { Box as Box5, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack5, Typography as Typography4 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+var openEditModeDialog = (lockedBy) => {
+  openDialog({
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
+  });
+};
+var EditModeDialog = ({ lockedBy }) => {
+  const content = __7("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(Box5, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React10.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(Typography4, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(DialogContent, null, /* @__PURE__ */ React10.createElement(Stack5, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(Typography4, { variant: "body2" }, __7(
+    "You can wait for them to finish or reach out to coordinate your changes together.",
+    "elementor"
+  )), /* @__PURE__ */ React10.createElement(DialogActions, null, /* @__PURE__ */ React10.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __7("Close", "elementor"))))));
+};
+
+// src/components/overridable-props/overridable-prop-indicator.tsx
+import * as React13 from "react";
+import { useBoundProp } from "@elementor/editor-controls";
+import { getV1CurrentDocument } from "@elementor/editor-documents";
+import { useElement } from "@elementor/editor-editing-panel";
+import { getWidgetsCache } from "@elementor/editor-elements";
+import { __getState as getState6 } from "@elementor/store";
+import { bindPopover, bindTrigger, Popover as Popover2, Tooltip, usePopupState } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
+
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils(
+  "overridable",
+  z2.object({
+    override_key: z2.string(),
+    origin_value: z2.object({
+      $$type: z2.string(),
+      value: z2.unknown()
+    }).nullable()
+  })
+);
+
+// src/store/set-overridable-prop.ts
+import { __dispatch as dispatch3, __getState as getState4 } from "@elementor/store";
+import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
+import { __ as __8 } from "@wordpress/i18n";
+function setOverridableProp({
+  componentId,
+  overrideKey,
+  elementId,
+  label,
+  groupId,
+  propKey,
+  elType,
+  widgetType,
+  originValue
+}) {
+  const overridableProps = selectOverridableProps(getState4(), componentId);
+  if (!overridableProps) {
+    return;
+  }
+  const existingOverridableProp = overrideKey ? overridableProps.props[overrideKey] : null;
+  const { props: existingProps, groups: existingGroups } = { ...overridableProps };
+  const { groups: updatedGroups, currentGroupId } = getUpdatedGroups(
+    existingGroups,
+    groupId || existingOverridableProp?.groupId
+  );
+  const overridableProp = {
+    overrideKey: existingOverridableProp?.overrideKey || generateUniqueId2("prop"),
+    label,
+    elementId,
+    propKey,
+    widgetType,
+    elType,
+    originValue,
+    groupId: currentGroupId
+  };
+  const props = {
+    ...existingProps,
+    [overridableProp.overrideKey]: overridableProp
+  };
+  const groups = {
+    items: {
+      ...updatedGroups.items,
+      [currentGroupId]: getGroupWithProp(updatedGroups, currentGroupId, overridableProp)
     },
-    isSubmitting ? __2("Creating\u2026", "elementor") : __2("Create", "elementor")
-  )));
+    order: updatedGroups.order.includes(currentGroupId) ? updatedGroups.order : [...updatedGroups.order, currentGroupId]
+  };
+  const isChangingGroups = existingOverridableProp && existingOverridableProp.groupId !== currentGroupId;
+  if (isChangingGroups) {
+    groups.items[existingOverridableProp.groupId] = getGroupWithoutProp(
+      updatedGroups,
+      existingOverridableProp.groupId,
+      overridableProp
+    );
+  }
+  dispatch3(
+    slice.actions.setOverridableProps({
+      componentId,
+      overridableProps: {
+        props,
+        groups
+      }
+    })
+  );
+  return overridableProp;
+}
+function getUpdatedGroups(groups, groupId) {
+  if (!groupId) {
+    if (groups.order.length > 0) {
+      return { groups, currentGroupId: groups.order[0] };
+    }
+    return addNewGroup(groups);
+  }
+  if (!groups.items[groupId]) {
+    return addNewGroup(groups, groupId);
+  }
+  return { groups, currentGroupId: groupId };
+}
+function addNewGroup(groups, groupId) {
+  const currentGroupId = groupId || generateUniqueId2("group");
+  const updatedGroups = {
+    ...groups,
+    items: {
+      ...groups.items,
+      [currentGroupId]: {
+        id: currentGroupId,
+        label: __8("Default", "elementor"),
+        props: []
+      }
+    },
+    order: [...groups.order, currentGroupId]
+  };
+  return { groups: updatedGroups, currentGroupId };
+}
+function getGroupWithProp(groups, groupId, overridableProp) {
+  const group = { ...groups.items[groupId] };
+  if (!group.props.includes(overridableProp.overrideKey)) {
+    group.props = [...group.props, overridableProp.overrideKey];
+  }
+  return group;
+}
+function getGroupWithoutProp(groups, groupId, overridableProp) {
+  const group = { ...groups.items[groupId] };
+  if (group) {
+    group.props = group.props.filter((key) => key !== overridableProp.overrideKey);
+  }
+  return group;
+}
+
+// src/components/overridable-props/indicator.tsx
+import * as React11 from "react";
+import { forwardRef } from "react";
+import { CheckIcon, PlusIcon } from "@elementor/icons";
+import { Box as Box6, styled } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+var SIZE = "tiny";
+var IconContainer = styled(Box6)`
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+
+	& > svg {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		width: 10px;
+		height: 10px;
+		fill: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke-width: 2px;
+	}
+`;
+var Content = styled(Box6)`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	margin-inline: ${({ theme }) => theme.spacing(0.5)};
+
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% ) rotate( 45deg );
+		width: 5px;
+		height: 5px;
+		border-radius: 1px;
+		background-color: ${({ theme }) => theme.palette.primary.main};
+		transition: all 0.1s ease-in-out;
+	}
+
+	&:hover,
+	&.enlarged {
+		&:before {
+			width: 12px;
+			height: 12px;
+			border-radius: 2px;
+		}
+
+		.icon {
+			opacity: 1;
+		}
+	}
+`;
+var Indicator = forwardRef(({ triggerProps, isOpen, isOverridable }, ref) => /* @__PURE__ */ React11.createElement(Content, { ref, ...triggerProps, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React11.createElement(
+  IconContainer,
+  {
+    className: "icon",
+    "aria-label": isOverridable ? __9("Overridable property", "elementor") : __9("Make prop overridable", "elementor")
+  },
+  isOverridable ? /* @__PURE__ */ React11.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React11.createElement(PlusIcon, { fontSize: SIZE })
+)));
+
+// src/components/overridable-props/overridable-prop-form.tsx
+import * as React12 from "react";
+import { useState as useState4 } from "react";
+import { Form as Form2, MenuListItem } from "@elementor/editor-ui";
+import { Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack6, TextField as TextField3, Typography as Typography5 } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
+var SIZE2 = "tiny";
+var DEFAULT_GROUP = { value: null, label: __10("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue }) {
+  const [propLabel, setPropLabel] = useState4(currentValue?.label ?? null);
+  const [group, setGroup] = useState4(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = __10("Name", "elementor");
+  const groupName = __10("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? __10("Create new property", "elementor") : __10("Update property", "elementor");
+  const ctaLabel = isCreate ? __10("Create", "elementor") : __10("Update", "elementor");
+  return /* @__PURE__ */ React12.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React12.createElement(Stack6, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React12.createElement(
+    Stack6,
+    {
+      direction: "row",
+      alignItems: "center",
+      py: 1,
+      px: 1.5,
+      sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
+    },
+    /* @__PURE__ */ React12.createElement(Typography5, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React12.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(FormLabel2, { size: "tiny" }, name)), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(
+    TextField3,
+    {
+      name,
+      size: SIZE2,
+      fullWidth: true,
+      placeholder: __10("Enter value", "elementor"),
+      value: propLabel ?? "",
+      onChange: (e) => setPropLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React12.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(FormLabel2, { size: "tiny" }, groupName)), /* @__PURE__ */ React12.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(
+    Select,
+    {
+      name: groupName,
+      size: SIZE2,
+      fullWidth: true,
+      value: group ?? null,
+      onChange: setGroup,
+      displayEmpty: true,
+      renderValue: (selectedValue) => {
+        if (!selectedValue || selectedValue === "") {
+          const [firstGroup = DEFAULT_GROUP] = groups ?? [];
+          return firstGroup.label;
+        }
+        return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
+      }
+    },
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React12.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React12.createElement(Stack6, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React12.createElement(Button3, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+}
+
+// src/components/overridable-props/utils/get-overridable-prop.ts
+import { __getState as getState5 } from "@elementor/store";
+function getOverridableProp({
+  componentId,
+  overrideKey
+}) {
+  const overridableProps = selectOverridableProps(getState5(), componentId);
+  if (!overridableProps) {
+    return void 0;
+  }
+  return overridableProps.props[overrideKey];
+}
+
+// src/components/overridable-props/overridable-prop-indicator.tsx
+var FORBIDDEN_KEYS = ["_cssid", "attributes"];
+function OverridablePropIndicator() {
+  const { bind } = useBoundProp();
+  const currentDocument = getV1CurrentDocument();
+  if (currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || !currentDocument.id) {
+    return null;
+  }
+  if (!isPropAllowed(bind)) {
+    return null;
+  }
+  const overridableProps = selectOverridableProps(getState6(), currentDocument.id);
+  return /* @__PURE__ */ React13.createElement(Content2, { componentId: currentDocument.id, overridableProps });
+}
+function Content2({ componentId, overridableProps }) {
+  const {
+    element: { id: elementId },
+    elementType
+  } = useElement();
+  const { value, bind } = useBoundProp();
+  const { value: overridableValue, setValue: setOverridableValue } = useBoundProp(componentOverridablePropTypeUtil);
+  const popupState = usePopupState({
+    variant: "popover"
+  });
+  const triggerProps = bindTrigger(popupState);
+  const popoverProps = bindPopover(popupState);
+  const { elType } = getWidgetsCache()?.[elementType.key] ?? { elType: "widget" };
+  const handleSubmit = ({ label, group }) => {
+    const originValue = !overridableValue ? value : overridableValue?.origin_value ?? {};
+    const overridablePropConfig = setOverridableProp({
+      componentId,
+      overrideKey: overridableValue?.override_key ?? null,
+      elementId,
+      label,
+      groupId: group,
+      propKey: bind,
+      elType: elType ?? "widget",
+      widgetType: elementType.key,
+      originValue
+    });
+    if (!overridableValue && overridablePropConfig) {
+      setOverridableValue({
+        override_key: overridablePropConfig.overrideKey,
+        origin_value: originValue
+      });
+    }
+    popupState.close();
+  };
+  const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Tooltip, { placement: "top", title: __11("Override Property", "elementor") }, /* @__PURE__ */ React13.createElement(
+    Indicator,
+    {
+      triggerProps,
+      isOpen: !!popoverProps.open,
+      isOverridable: !!overridableValue
+    }
+  )), /* @__PURE__ */ React13.createElement(
+    Popover2,
+    {
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { my: 2.5 }
+      },
+      ...popoverProps
+    },
+    /* @__PURE__ */ React13.createElement(
+      OverridablePropForm,
+      {
+        onSubmit: handleSubmit,
+        groups: overridableProps?.groups.order.map((groupId) => ({
+          value: groupId,
+          label: overridableProps.groups.items[groupId].label
+        })),
+        currentValue: overridableConfig
+      }
+    )
+  ));
+}
+function isPropAllowed(bind) {
+  return !FORBIDDEN_KEYS.includes(bind);
+}
+
+// src/mcp/index.ts
+import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
+
+// src/mcp/save-as-component-tool.ts
+import { getContainer as getContainer2 } from "@elementor/editor-elements";
+import { getMCPByDomain } from "@elementor/editor-mcp";
+import { z as z3 } from "@elementor/schema";
+var InputSchema = {
+  element_id: z3.string().describe(
+    'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
+  ),
+  component_name: z3.string().describe("The name for the new component. Should be descriptive and unique among existing components.")
+};
+var OutputSchema = {
+  message: z3.string().optional().describe("Additional information about the operation result"),
+  component_uid: z3.string().optional().describe("The unique identifier of the newly created component (only present on success)")
+};
+var VALID_ELEMENT_TYPES = ["e-div-block", "e-flexbox", "e-tabs"];
+var ERROR_MESSAGES = {
+  ELEMENT_NOT_FOUND: "Element not found. Use 'list-elements' to get valid element IDs.",
+  ELEMENT_NOT_ONE_OF_TYPES: `Element is not one of the following types: ${VALID_ELEMENT_TYPES.join(", ")}`,
+  ELEMENT_IS_LOCKED: "Cannot save a locked element as a component."
+};
+var handleSaveAsComponent = async (params) => {
+  const { element_id: elementId, component_name: componentName } = params;
+  const container = getContainer2(elementId);
+  if (!container) {
+    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_FOUND);
+  }
+  const elType = container.model.get("elType");
+  if (!VALID_ELEMENT_TYPES.includes(elType)) {
+    throw new Error(ERROR_MESSAGES.ELEMENT_NOT_ONE_OF_TYPES);
+  }
+  const element = container.model.toJSON({ remove: ["default"] });
+  if (element?.isLocked) {
+    throw new Error(ERROR_MESSAGES.ELEMENT_IS_LOCKED);
+  }
+  const uid = createUnpublishedComponent(componentName, element, null);
+  return {
+    status: "ok",
+    message: `Component "${componentName}" created successfully.`,
+    component_uid: uid
+  };
+};
+var initSaveAsComponentTool = () => {
+  return getMCPByDomain("components").addTool({
+    name: "save-as-component",
+    schema: InputSchema,
+    outputSchema: OutputSchema,
+    description: `Save an existing element as a reusable component in the Elementor editor.
+
+## When NOT to use this tool:
+- Do not use for elements that are already components (widgetType: 'e-component').
+- Do not use for locked elements.
+- Do not guess element IDs. Always use "list-elements" first to get valid IDs.
+
+## Prerequisites:
+- **Verify element type**: Ensure the element is not already a component (widgetType should not be 'e-component').
+- **Check if element is unlocked**: Locked elements cannot be saved as components.
+- **Check that the element is one of the following types**: ${VALID_ELEMENT_TYPES.join(", ")}
+
+## Required parameters:
+- **element_id**: The unique ID of the element to save.
+- **component_name**: A descriptive name for the component (2-50 characters).
+
+## Example tool call:
+\`\`\`json
+{ "element_id": "abc123", "component_name": "Hero Section" }
+\`\`\`
+`,
+    handler: handleSaveAsComponent
+  });
+};
+
+// src/mcp/index.ts
+function initMcp() {
+  const { setMCPDescription } = getMCPByDomain2("components");
+  setMCPDescription(
+    `Elementor Editor Components MCP - Tools for creating and managing reusable components. 
+        Components are reusable blocks of content that can be used multiple times across the pages, its a widget which contains a set of elements and styles.`
+  );
+  initSaveAsComponentTool();
+}
+
+// src/populate-store.ts
+import { useEffect as useEffect5 } from "react";
+import { __dispatch as dispatch4 } from "@elementor/store";
+function PopulateStore() {
+  useEffect5(() => {
+    dispatch4(loadComponents());
+  }, []);
+  return null;
+}
+
+// src/store/components-styles-provider.ts
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import { __getState as getState7, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+var componentsStylesProvider = createStylesProvider({
+  key: "components-styles",
+  priority: 100,
+  subscribe: (cb) => subscribeWithSelector(
+    (state) => state[SLICE_NAME],
+    () => {
+      cb();
+    }
+  ),
+  actions: {
+    all: () => {
+      return selectFlatStyles(getState7());
+    },
+    get: (id) => {
+      return selectFlatStyles(getState7()).find((style) => style.id === id) ?? null;
+    }
+  }
+});
+
+// src/store/remove-component-styles.ts
+import { __dispatch as dispatch5 } from "@elementor/store";
+function removeComponentStyles(id) {
+  apiClient.invalidateComponentConfigCache(id);
+  dispatch5(slice.actions.removeStyles({ id }));
+}
+
+// src/sync/create-components-before-save.ts
+import { updateElementSettings } from "@elementor/editor-elements";
+import { __dispatch as dispatch6, __getState as getState8 } from "@elementor/store";
+async function createComponentsBeforeSave({
+  container,
+  status
+}) {
+  const unpublishedComponents = selectUnpublishedComponents(getState8());
+  if (!unpublishedComponents.length) {
+    return;
+  }
+  try {
+    const uidToComponentId = await createComponents(unpublishedComponents, status);
+    const elements = container.model.get("elements").toJSON();
+    updateComponentInstances(elements, uidToComponentId);
+    dispatch6(
+      slice.actions.add(
+        unpublishedComponents.map((component) => ({
+          id: uidToComponentId.get(component.uid),
+          name: component.name,
+          uid: component.uid
+        }))
+      )
+    );
+    dispatch6(slice.actions.resetUnpublished());
+  } catch (error) {
+    throw new Error(`Failed to publish components and update component instances: ${error}`);
+  }
+}
+async function createComponents(components, status) {
+  const response = await apiClient.create({
+    status,
+    items: components.map((component) => ({
+      uid: component.uid,
+      title: component.name,
+      elements: component.elements
+    }))
+  });
+  const map = /* @__PURE__ */ new Map();
+  Object.entries(response).forEach(([key, value]) => {
+    map.set(key, value);
+  });
+  return map;
+}
+function updateComponentInstances(elements, uidToComponentId) {
+  elements.forEach((element) => {
+    const { shouldUpdate, newComponentId } = shouldUpdateElement(element, uidToComponentId);
+    if (shouldUpdate) {
+      updateElementComponentId(element.id, newComponentId);
+    }
+    if (element.elements) {
+      updateComponentInstances(element.elements, uidToComponentId);
+    }
+  });
+}
+function shouldUpdateElement(element, uidToComponentId) {
+  if (element.widgetType === "e-component") {
+    const currentComponentId = element.settings?.component_instance?.value?.component_id;
+    if (currentComponentId && uidToComponentId.has(currentComponentId)) {
+      return { shouldUpdate: true, newComponentId: uidToComponentId.get(currentComponentId) };
+    }
+  }
+  return { shouldUpdate: false, newComponentId: null };
+}
+function updateElementComponentId(elementId, componentId) {
+  updateElementSettings({
+    id: elementId,
+    props: {
+      component_instance: {
+        $$type: "component-instance",
+        value: { component_id: componentId }
+      }
+    },
+    withHistory: false
+  });
+}
+
+// src/sync/update-components-before-save.ts
+import { isDocumentDirty as isDocumentDirty2 } from "@elementor/editor-documents";
+async function updateComponentsBeforeSave({ status, container }) {
+  if (status !== "publish") {
+    return;
+  }
+  const elements = container.model.get("elements").toJSON();
+  const componentIds = await getComponentIds(elements);
+  const componentDocumentData = await Promise.all(componentIds.map(getComponentDocumentData));
+  const draftIds = componentDocumentData.filter((document) => !!document).filter(isDocumentDirty2).map((document) => document.id);
+  if (draftIds.length === 0) {
+    return;
+  }
+  await apiClient.updateStatuses(draftIds, "publish");
+  draftIds.forEach((id) => invalidateComponentDocumentData(id));
+}
+
+// src/sync/before-save.ts
+var beforeSave = ({ container, status }) => {
+  return Promise.all([
+    createComponentsBeforeSave({ container, status }),
+    updateComponentsBeforeSave({ container, status })
+  ]);
 };
 
 // src/init.ts
 function init() {
+  stylesRepository.register(componentsStylesProvider);
+  registerSlice(slice);
+  registerElementType(
+    TYPE,
+    (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
+  );
+  registerDataHook("dependency", "editor/documents/close", (args) => {
+    const document = getV1CurrentDocument2();
+    if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
+      args.mode = "autosave";
+    }
+    return true;
+  });
+  registerDataHook("after", "preview/drop", onElementDrop);
+  window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __3("Components", "elementor"),
-    component: ComponentsTab
+    label: __12("Components", "elementor"),
+    component: Components
   });
   injectIntoTop({
     id: "create-component-popup",
     component: CreateComponentForm
   });
+  injectIntoLogic({
+    id: "components-populate-store",
+    component: PopulateStore
+  });
+  injectIntoTop({
+    id: "edit-component",
+    component: EditComponent
+  });
+  registerDataHook("after", "editor/documents/attach-preview", async () => {
+    const { id, config } = getV1CurrentDocument2();
+    if (id) {
+      removeComponentStyles(id);
+    }
+    await loadComponentsAssets(config?.elements ?? []);
+  });
+  registerFieldIndicator({
+    fieldType: FIELD_TYPE.SETTINGS,
+    id: "component-overridable-prop",
+    priority: 1,
+    indicator: OverridablePropIndicator
+  });
+  settingsTransformersRegistry2.register("component-instance", componentInstanceTransformer);
+  settingsTransformersRegistry2.register("overridable", componentOverridableTransformer);
+  initMcp();
 }
 export {
   init