@elementor/editor-components 3.33.0-98 → 3.34.2

package/dist/index.js

@@ -36,62 +36,860 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
+var import_editor_canvas6 = require("@elementor/editor-canvas");
+var import_editor_documents7 = require("@elementor/editor-documents");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
-var import_i18n3 = require("@wordpress/i18n");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_store30 = require("@elementor/store");
+var import_i18n12 = require("@wordpress/i18n");
 
-// src/components/components-tab.tsx
-var React = __toESM(require("react"));
-var import_ui = require("@elementor/ui");
-function ComponentsTab() {
-  return /* @__PURE__ */ React.createElement(import_ui.Box, { px: 2 }, "This is the Components tab.");
-}
+// src/component-instance-transformer.ts
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_store3 = require("@elementor/store");
 
-// src/components/create-component-form/create-component-form.tsx
-var React2 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_editor_elements2 = require("@elementor/editor-elements");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+// src/store/store.ts
+var import_store2 = require("@elementor/store");
 
-// src/hooks/use-components.ts
-var import_query = require("@elementor/query");
+// src/store/thunks.ts
+var import_store = require("@elementor/store");
 
 // src/api.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_http_client = require("@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: () => (0, import_http_client.httpService)().get(`${BASE_URL}`).then((res) => res.data.data),
-  create: (payload) => (0, import_http_client.httpService)().post(`${BASE_URL}`, payload).then((res) => res.data.data)
+  create: (payload) => (0, import_http_client.httpService)().post(`${BASE_URL}`, payload).then((res) => res.data.data),
+  updateStatuses: (ids, status) => (0, import_http_client.httpService)().put(`${BASE_URL}/status`, {
+    ids,
+    status
+  }),
+  getComponentConfig: (id) => import_editor_v1_adapters.ajax.load(getParams(id)),
+  invalidateComponentConfigCache: (id) => import_editor_v1_adapters.ajax.invalidateCache(getParams(id)),
+  getComponentLockStatus: async (componentId) => await (0, import_http_client.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 (0, import_http_client.httpService)().post(LOCK_COMPONENT, {
+    componentId
+  }).then((res) => res.data),
+  unlockComponent: async (componentId) => await (0, import_http_client.httpService)().post(UNLOCK_COMPONENT, {
+    componentId
+  }).then((res) => res.data)
+};
+
+// src/store/thunks.ts
+var loadComponents = (0, import_store.__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 = (0, import_store2.__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 = (0, import_store2.__createSelector)(
+  selectData,
+  selectUnpublishedData,
+  (data, unpublishedData) => [
+    ...unpublishedData.map((item) => ({ uid: item.uid, name: item.name })),
+    ...data
+  ]
+);
+var selectUnpublishedComponents = (0, import_store2.__createSelector)(
+  selectUnpublishedData,
+  (unpublishedData) => unpublishedData
+);
+var selectLoadIsPending = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "pending");
+var selectLoadIsError = (0, import_store2.__createSelector)(selectLoadStatus, (status) => status === "error");
+var selectStyles = (state) => state[SLICE_NAME].styles ?? {};
+var selectFlatStyles = (0, import_store2.__createSelector)(selectStylesDefinitions, (data) => Object.values(data).flat());
+var selectCreatedThisSession = (0, import_store2.__createSelector)(
+  getCreatedThisSession,
+  (createdThisSession) => createdThisSession
+);
+var DEFAULT_OVERRIDABLE_PROPS = {
+  props: {},
+  groups: {
+    items: {},
+    order: []
+  }
+};
+var selectOverridableProps = (0, import_store2.__createSelector)(
+  selectComponent,
+  (component) => {
+    if (!component) {
+      return void 0;
+    }
+    return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
+  }
+);
+var selectPath = (0, import_store2.__createSelector)(getPath, (path) => path);
+var selectCurrentComponentId = (0, import_store2.__createSelector)(
+  getCurrentComponentId,
+  (currentComponentId) => currentComponentId
+);
+
+// src/utils/component-document-data.ts
+var import_editor_documents = require("@elementor/editor-documents");
+var getComponentDocumentData = async (id) => {
+  const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
+  try {
+    return await documentManager.request(id);
+  } catch {
+    return null;
+  }
+};
+var invalidateComponentDocumentData = (id) => {
+  const documentManager = (0, import_editor_documents.getV1DocumentsManager)();
+  documentManager.invalidateCache(id);
+};
+
+// src/component-instance-transformer.ts
+var componentInstanceTransformer = (0, import_editor_canvas.createTransformer)(
+  async ({ component_id: id }) => {
+    const unpublishedComponents = selectUnpublishedComponents((0, import_store3.__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
+var import_editor_canvas2 = require("@elementor/editor-canvas");
+var componentOverridableTransformer = (0, import_editor_canvas2.createTransformer)(
+  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 = import_editor_canvas2.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
+var React6 = __toESM(require("react"));
+var import_editor_ui = require("@elementor/editor-ui");
+
+// src/components/components-tab/component-search.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
+// src/components/components-tab/search-provider.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_utils = require("@elementor/utils");
+var SearchContext = (0, import_react.createContext)(void 0);
+var SearchProvider = ({
+  children,
+  localStorageKey
+}) => {
+  const { debouncedValue, handleChange, inputValue } = (0, import_utils.useSearchState)({ localStorageKey });
+  const clearSearch = () => {
+    handleChange("");
+  };
+  return /* @__PURE__ */ React.createElement(SearchContext.Provider, { value: { handleChange, clearSearch, searchValue: debouncedValue, inputValue } }, children);
+};
+var useSearch = () => {
+  const context = (0, import_react.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(import_ui.Stack, { direction: "row", gap: 0.5, sx: { width: "100%", px: 2, py: 1.5 } }, /* @__PURE__ */ React2.createElement(import_ui.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
+    import_ui.TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: (0, import_i18n.__)("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React2.createElement(import_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
+      }
+    }
+  )));
 };
 
+// src/components/components-tab/components-list.tsx
+var React5 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
 // src/hooks/use-components.ts
-var COMPONENTS_QUERY_KEY = "components";
+var import_store5 = require("@elementor/store");
 var useComponents = () => {
-  return (0, import_query.useQuery)({
-    queryKey: [COMPONENTS_QUERY_KEY],
-    queryFn: apiClient.get,
-    staleTime: Infinity
+  const components = (0, import_store5.__useSelector)(selectComponents);
+  const isLoading = (0, import_store5.__useSelector)(selectLoadIsPending);
+  return { components, isLoading };
+};
+
+// src/components/components-tab/components-item.tsx
+var React3 = __toESM(require("react"));
+var import_editor_canvas4 = require("@elementor/editor-canvas");
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_icons2 = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+
+// src/store/load-components-assets.ts
+var import_editor_documents3 = require("@elementor/editor-documents");
+
+// src/create-component-type.ts
+var import_editor_canvas3 = require("@elementor/editor-canvas");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_i18n2 = require("@wordpress/i18n");
+
+// src/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
+var import_store7 = require("@elementor/store");
+var trackComponentEvent = ({ action, ...data }) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.components?.[action]) {
+    return;
+  }
+  const name = config.names.components[action];
+  dispatchEvent?.(name, data);
+};
+var onElementDrop = (_args, element) => {
+  if (!(element.model.get("widgetType") === "e-component")) {
+    return;
+  }
+  const editorSettings = element.model.get("editor_settings");
+  const componentName = editorSettings?.title;
+  const componentUID = editorSettings?.component_uid;
+  const instanceId = element.id;
+  const createdThisSession = selectCreatedThisSession((0, import_store7.__getState)());
+  const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
+  const eventsManagerConfig = window.elementorCommon.eventsManager.config;
+  const { locations, secondaryLocations } = eventsManagerConfig;
+  trackComponentEvent({
+    action: "instanceAdded",
+    instance_id: instanceId,
+    component_uid: componentUID,
+    component_name: componentName,
+    is_same_session_reuse: isSameSessionReuse,
+    location: locations.widgetPanel,
+    secondary_location: secondaryLocations.componentsTab
   });
 };
 
-// src/hooks/use-create-component.ts
-var import_query2 = require("@elementor/query");
-var useCreateComponentMutation = () => {
-  const queryClient = (0, import_query2.useQueryClient)();
-  return (0, import_query2.useMutation)({
-    mutationFn: apiClient.create,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: [COMPONENTS_QUERY_KEY] })
+// 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 (0, import_editor_canvas3.createTemplatedElementView)(options) {
+    legacyWindow = window;
+    eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
+    isComponentCurrentlyEdited() {
+      const currentDocument = (0, import_editor_documents2.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: () => (0, import_i18n2.__)("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 {
+        (0, import_editor_v1_adapters2.__privateRunCommand)("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/store/load-components-styles.ts
+var import_store9 = require("@elementor/store");
+async function loadComponentsStyles(componentIds) {
+  if (!componentIds.length) {
+    return;
+  }
+  const knownComponents = selectStyles((0, import_store9.__getState)());
+  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)])
+  );
+  (0, import_store9.__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(import_editor_documents3.isDocumentDirty);
+  if (isDrafted) {
+    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
+  }
+}
+
+// src/utils/get-container-for-new-element.ts
+var import_editor_elements = require("@elementor/editor-elements");
+var getContainerForNewElement = () => {
+  const currentDocumentContainer = (0, import_editor_elements.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 = (0, import_editor_elements.getSelectedElements)();
+  if (selectedElements.length !== 1) {
+    return void 0;
+  }
+  return (0, import_editor_elements.getContainer)(selectedElements[0].id);
+}
+
+// src/components/create-component-form/utils/replace-element-with-component.ts
+var import_editor_elements2 = require("@elementor/editor-elements");
+var replaceElementWithComponent = (element, component) => {
+  (0, import_editor_elements2.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]);
+    (0, import_editor_canvas4.endDragElementFromPanel)();
+  };
+  return /* @__PURE__ */ React3.createElement(
+    import_ui2.ListItemButton,
+    {
+      draggable: true,
+      onDragStart: () => (0, import_editor_canvas4.startDragElementFromPanel)(componentModel),
+      onDragEnd: handleDragEnd,
+      shape: "rounded",
+      sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
+    },
+    /* @__PURE__ */ React3.createElement(import_ui2.Box, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React3.createElement(import_ui2.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React3.createElement(import_icons2.ComponentsIcon, { fontSize: "tiny" })), /* @__PURE__ */ React3.createElement(
+      import_ui2.ListItemText,
+      {
+        primary: /* @__PURE__ */ React3.createElement(import_ui2.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]);
+  (0, import_editor_elements3.dropElement)({
+    containerId: container.id,
+    model,
+    options: { ...options, useHistory: false, scrollIntoView: true }
   });
 };
 
+// src/components/components-tab/loading-components.tsx
+var React4 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var ROWS_COUNT = 6;
+var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
+var LoadingComponents = () => {
+  return /* @__PURE__ */ React4.createElement(
+    import_ui3.Stack,
+    {
+      "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(
+      import_ui3.ListItemButton,
+      {
+        key: row,
+        sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
+        shape: "rounded"
+      },
+      /* @__PURE__ */ React4.createElement(import_ui3.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React4.createElement(import_ui3.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React4.createElement(import_ui3.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(import_ui4.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(
+    import_ui4.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      sx: { px: 2.5, pt: 10 },
+      gap: 1.75,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React5.createElement(import_ui4.Icon, { fontSize: "large" }, /* @__PURE__ */ React5.createElement(import_icons3.EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n3.__)("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n3.__)(
+      "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React5.createElement(import_ui4.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.Typography,
+      {
+        align: "left",
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "flex", flexDirection: "column" }
+      },
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React5.createElement("span", null, (0, import_i18n3.__)("3. Use the component icon in the Edit panel header", "elementor"))
+    )
+  );
+};
+var EmptySearchResult = () => {
+  const { searchValue, clearSearch } = useSearch();
+  return /* @__PURE__ */ React5.createElement(
+    import_ui4.Stack,
+    {
+      color: "text.secondary",
+      pt: 5,
+      alignItems: "center",
+      gap: 1,
+      overflow: "hidden",
+      justifySelf: "center"
+    },
+    /* @__PURE__ */ React5.createElement(import_icons3.ComponentsIcon, null),
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.Box,
+      {
+        sx: {
+          width: "100%"
+        }
+      },
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n3.__)("Sorry, nothing matched", "elementor")),
+      searchValue && /* @__PURE__ */ React5.createElement(
+        import_ui4.Typography,
+        {
+          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(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n3.__)("Try something else.", "elementor")),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React5.createElement(import_ui4.Link, { color: "secondary", variant: "caption", component: "button", onClick: clearSearch }, (0, import_i18n3.__)("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(import_editor_ui.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
+var React7 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_editor_elements4 = require("@elementor/editor-elements");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
+// src/store/create-unpublished-component.ts
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_store11 = require("@elementor/store");
+var import_utils2 = require("@elementor/utils");
+function createUnpublishedComponent(name, element, eventData) {
+  const uid = (0, import_utils2.generateUniqueId)("component");
+  const componentBase = { uid, name };
+  (0, import_store11.__dispatch)(
+    slice.actions.addUnpublished({
+      ...componentBase,
+      elements: [element]
+    })
+  );
+  (0, import_store11.__dispatch)(slice.actions.addCreatedThisSession(uid));
+  replaceElementWithComponent(element, componentBase);
+  trackComponentEvent({
+    action: "created",
+    component_uid: uid,
+    component_name: name,
+    ...eventData
+  });
+  (0, import_editor_v1_adapters3.__privateRunCommand)("document/save/auto");
+  return uid;
+}
+
 // src/components/create-component-form/hooks/use-form.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var useForm = (initialValues) => {
-  const [values, setValues] = (0, import_react.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react.useState)({});
-  const isValid = (0, import_react.useMemo)(() => {
+  const [values, setValues] = (0, import_react2.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const isValid = (0, import_react2.useMemo)(() => {
     return !Object.values(errors).some((error) => error);
   }, [errors]);
   const handleChange = (e, field, validationSchema) => {
@@ -137,16 +935,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema = require("@elementor/schema");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n4 = 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_i18n.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
+      (0, import_i18n4.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n.__)("Component name already exists", "elementor")
+      message: (0, import_i18n4.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -154,104 +952,115 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n.__)("Component name is required.", "elementor")
+      message: (0, import_i18n4.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n4.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
 
-// src/components/create-component-form/utils/replace-element-with-component.ts
-var import_editor_elements = require("@elementor/editor-elements");
-var import_editor_props = require("@elementor/editor-props");
-var replaceElementWithComponent = async (element, componentId) => {
-  (0, import_editor_elements.replaceElement)({
-    currentElement: element,
-    newElement: {
-      elType: "widget",
-      widgetType: "e-component",
-      settings: {
-        component_id: import_editor_props.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] = (0, import_react2.useState)(null);
-  const [anchorPosition, setAnchorPosition] = (0, import_react2.useState)();
-  const [resultNotification, setResultNotification] = (0, import_react2.useState)(null);
-  const { mutate: createComponent, isPending } = useCreateComponentMutation();
-  (0, import_react2.useEffect)(() => {
+  const [element, setElement] = (0, import_react3.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)();
+  const [resultNotification, setResultNotification] = (0, import_react3.useState)(null);
+  const eventData = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
-      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements2.getElementLabel)(event.detail.element.id) });
+      setElement({ element: event.detail.element, elementLabel: (0, import_editor_elements4.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: (0, import_i18n2.__)("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 = (0, import_i18n2.__)("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: (0, import_i18n5.__)("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 = (0, import_i18n5.__)("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(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React2.createElement(
-    import_ui2.Popover,
+  const cancelSave = () => {
+    resetAndClosePopup();
+    trackComponentEvent({
+      action: "createCancelled",
+      ...eventData.current
+    });
+  };
+  return /* @__PURE__ */ React7.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React7.createElement(
+    import_ui5.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(import_ui2.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Alert,
+  ), /* @__PURE__ */ React7.createElement(import_ui5.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React7.createElement(
+    import_ui5.Alert,
     {
       onClose: () => setResultNotification(null),
       severity: resultNotification?.type,
@@ -264,19 +1073,18 @@ var FONT_SIZE = "tiny";
 var Form = ({
   initialValues,
   handleSave,
-  isSubmitting,
   closePopup
 }) => {
   const { values, errors, isValid, handleChange, validateForm: validateForm2 } = useForm(initialValues);
-  const { data: components } = useComponents();
-  const existingComponentNames = (0, import_react2.useMemo)(() => {
+  const { components } = useComponents();
+  const existingComponentNames = (0, import_react3.useMemo)(() => {
     return components?.map((component) => component.name) ?? [];
   }, [components]);
-  const changeValidationSchema = (0, import_react2.useMemo)(
+  const changeValidationSchema = (0, import_react3.useMemo)(
     () => createBaseComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
-  const submitValidationSchema = (0, import_react2.useMemo)(
+  const submitValidationSchema = (0, import_react3.useMemo)(
     () => createSubmitComponentSchema(existingComponentNames),
     [existingComponentNames]
   );
@@ -286,8 +1094,15 @@ var Form = ({
       handleSave(parsedValues);
     }
   };
-  return /* @__PURE__ */ React2.createElement(import_ui2.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Stack,
+  const texts = {
+    heading: (0, import_i18n5.__)("Save as a component", "elementor"),
+    name: (0, import_i18n5.__)("Name", "elementor"),
+    cancel: (0, import_i18n5.__)("Cancel", "elementor"),
+    create: (0, import_i18n5.__)("Create", "elementor")
+  };
+  const nameInputId = "component-name";
+  return /* @__PURE__ */ React7.createElement(import_editor_ui2.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React7.createElement(import_ui5.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React7.createElement(
+    import_ui5.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -295,12 +1110,12 @@ var Form = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React2.createElement(import_icons.StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n2.__)("Save as a component", "elementor"))
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.TextField,
+    /* @__PURE__ */ React7.createElement(import_icons4.StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React7.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, texts.heading)
+  ), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(import_ui5.FormLabel, { htmlFor: nameInputId, size: "tiny" }, texts.name)), /* @__PURE__ */ React7.createElement(import_ui5.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React7.createElement(
+    import_ui5.TextField,
     {
-      id: "component-name",
+      id: nameInputId,
       size: FONT_SIZE,
       fullWidth: true,
       value: values.componentName,
@@ -309,30 +1124,952 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n2.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(
-    import_ui2.Button,
+  ))), /* @__PURE__ */ React7.createElement(import_ui5.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React7.createElement(import_ui5.Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React7.createElement(import_ui5.Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+};
+
+// src/components/edit-component/edit-component.tsx
+var React9 = __toESM(require("react"));
+var import_react6 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_store15 = require("@elementor/store");
+
+// src/store/actions.ts
+var import_store13 = require("@elementor/store");
+function updateCurrentComponent({
+  path,
+  currentComponentId
+}) {
+  const dispatch7 = (0, import_store13.__getStore)()?.dispatch;
+  if (!dispatch7) {
+    return;
+  }
+  dispatch7(slice.actions.setPath(path));
+  dispatch7(slice.actions.setCurrentComponentId(currentComponentId));
+}
+
+// src/components/edit-component/component-modal.tsx
+var React8 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+var import_i18n6 = require("@wordpress/i18n");
+
+// src/hooks/use-canvas-document.ts
+var import_editor_canvas5 = require("@elementor/editor-canvas");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+function useCanvasDocument() {
+  return (0, import_editor_v1_adapters4.__privateUseListenTo)((0, import_editor_v1_adapters4.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas5.getCanvasIframeDocument)());
+}
+
+// src/hooks/use-element-rect.ts
+var import_react4 = require("react");
+var import_utils3 = require("@elementor/utils");
+function useElementRect(element) {
+  const [rect, setRect] = (0, import_react4.useState)(new DOMRect(0, 0, 0, 0));
+  const onChange = (0, import_utils3.throttle)(
+    () => {
+      setRect(element?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0));
+    },
+    20,
+    true
+  );
+  useScrollListener({ element, onChange });
+  useResizeListener({ element, onChange });
+  useMutationsListener({ element, onChange });
+  (0, import_react4.useEffect)(
+    () => () => {
+      onChange.cancel();
+    },
+    [onChange]
+  );
+  return rect;
+}
+function useScrollListener({ element, onChange }) {
+  (0, import_react4.useEffect)(() => {
+    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 }) {
+  (0, import_react4.useEffect)(() => {
+    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 }) {
+  (0, import_react4.useEffect)(() => {
+    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();
+  (0, import_react5.useEffect)(() => {
+    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 (0, import_react_dom.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",
+    {
+      style: backdropStyle,
+      onClick: onClose,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": (0, import_i18n6.__)("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 = (0, import_editor_documents4.getV1DocumentsManager)();
+  const { path, currentComponentId } = useCurrentComponent();
+  (0, import_react6.useEffect)(() => {
+    return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("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,
     {
-      onClick: handleSubmit,
-      disabled: isSubmitting || !isValid,
-      variant: "contained",
-      color: "primary",
-      size: "small"
+      instanceId: nextDocument?.container.view?.el?.dataset.id,
+      componentId: nextDocument.id
+    }
+  ];
+}
+function useNavigateBack(path) {
+  const documentsManager = (0, import_editor_documents4.getV1DocumentsManager)();
+  return (0, import_react6.useCallback)(() => {
+    const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
+    const switchToDocument = (id, selector) => {
+      (0, import_editor_v1_adapters5.__privateRunCommand)("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 = (0, import_store15.__useSelector)(selectPath);
+  const currentComponentId = (0, import_store15.__useSelector)(selectCurrentComponentId);
+  return {
+    path,
+    currentComponentId
+  };
+}
+function getComponentDOMElement(id) {
+  if (!id) {
+    return null;
+  }
+  const documentsManager = (0, import_editor_documents4.getV1DocumentsManager)();
+  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
+var React10 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var openEditModeDialog = (lockedBy) => {
+  (0, import_editor_ui3.openDialog)({
+    component: /* @__PURE__ */ React10.createElement(EditModeDialog, { lockedBy })
+  });
+};
+var EditModeDialog = ({ lockedBy }) => {
+  const content = (0, import_i18n7.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui6.DialogHeader, { logo: false }, /* @__PURE__ */ React10.createElement(import_ui6.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React10.createElement(import_ui6.Icon, { color: "secondary" }, /* @__PURE__ */ React10.createElement(import_icons5.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React10.createElement(import_ui6.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React10.createElement(import_ui6.DialogContent, null, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React10.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n7.__)(
+    "You can wait for them to finish or reach out to coordinate your changes together.",
+    "elementor"
+  )), /* @__PURE__ */ React10.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React10.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui3.closeDialog }, (0, import_i18n7.__)("Close", "elementor"))))));
+};
+
+// src/components/overridable-props/overridable-prop-indicator.tsx
+var React13 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_store21 = require("@elementor/store");
+var import_ui9 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props.createPropUtils)(
+  "overridable",
+  import_schema2.z.object({
+    override_key: import_schema2.z.string(),
+    origin_value: import_schema2.z.object({
+      $$type: import_schema2.z.string(),
+      value: import_schema2.z.unknown()
+    }).nullable()
+  })
+);
+
+// src/store/set-overridable-prop.ts
+var import_store17 = require("@elementor/store");
+var import_utils4 = require("@elementor/utils");
+var import_i18n8 = require("@wordpress/i18n");
+function setOverridableProp({
+  componentId,
+  overrideKey,
+  elementId,
+  label,
+  groupId,
+  propKey,
+  elType,
+  widgetType,
+  originValue
+}) {
+  const overridableProps = selectOverridableProps((0, import_store17.__getState)(), 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 || (0, import_utils4.generateUniqueId)("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 ? (0, import_i18n2.__)("Creating\u2026", "elementor") : (0, import_i18n2.__)("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
+    );
+  }
+  (0, import_store17.__dispatch)(
+    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 || (0, import_utils4.generateUniqueId)("group");
+  const updatedGroups = {
+    ...groups,
+    items: {
+      ...groups.items,
+      [currentGroupId]: {
+        id: currentGroupId,
+        label: (0, import_i18n8.__)("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
+var React11 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var IconContainer = (0, import_ui7.styled)(import_ui7.Box)`
+	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 = (0, import_ui7.styled)(import_ui7.Box)`
+	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 = (0, import_react7.forwardRef)(({ triggerProps, isOpen, isOverridable }, ref) => /* @__PURE__ */ React11.createElement(Content, { ref, ...triggerProps, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React11.createElement(
+  IconContainer,
+  {
+    className: "icon",
+    "aria-label": isOverridable ? (0, import_i18n9.__)("Overridable property", "elementor") : (0, import_i18n9.__)("Make prop overridable", "elementor")
+  },
+  isOverridable ? /* @__PURE__ */ React11.createElement(import_icons6.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React11.createElement(import_icons6.PlusIcon, { fontSize: SIZE })
+)));
+
+// src/components/overridable-props/overridable-prop-form.tsx
+var React12 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui8 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+var SIZE2 = "tiny";
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n10.__)("Default", "elementor") };
+function OverridablePropForm({ onSubmit, groups, currentValue }) {
+  const [propLabel, setPropLabel] = (0, import_react8.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react8.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = (0, import_i18n10.__)("Name", "elementor");
+  const groupName = (0, import_i18n10.__)("Group Name", "elementor");
+  const isCreate = currentValue === void 0;
+  const title = isCreate ? (0, import_i18n10.__)("Create new property", "elementor") : (0, import_i18n10.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n10.__)("Create", "elementor") : (0, import_i18n10.__)("Update", "elementor");
+  return /* @__PURE__ */ React12.createElement(import_editor_ui4.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React12.createElement(import_ui8.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React12.createElement(
+    import_ui8.Stack,
+    {
+      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(import_ui8.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React12.createElement(import_ui8.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React12.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(import_ui8.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React12.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(
+    import_ui8.TextField,
+    {
+      name,
+      size: SIZE2,
+      fullWidth: true,
+      placeholder: (0, import_i18n10.__)("Enter value", "elementor"),
+      value: propLabel ?? "",
+      onChange: (e) => setPropLabel(e.target.value)
+    }
+  ))), /* @__PURE__ */ React12.createElement(import_ui8.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React12.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(import_ui8.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React12.createElement(import_ui8.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React12.createElement(
+    import_ui8.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(import_editor_ui4.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React12.createElement(import_ui8.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React12.createElement(import_ui8.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+}
+
+// src/components/overridable-props/utils/get-overridable-prop.ts
+var import_store19 = require("@elementor/store");
+function getOverridableProp({
+  componentId,
+  overrideKey
+}) {
+  const overridableProps = selectOverridableProps((0, import_store19.__getState)(), 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 } = (0, import_editor_controls.useBoundProp)();
+  const currentDocument = (0, import_editor_documents5.getV1CurrentDocument)();
+  if (currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || !currentDocument.id) {
+    return null;
+  }
+  if (!isPropAllowed(bind)) {
+    return null;
+  }
+  const overridableProps = selectOverridableProps((0, import_store21.__getState)(), currentDocument.id);
+  return /* @__PURE__ */ React13.createElement(Content2, { componentId: currentDocument.id, overridableProps });
+}
+function Content2({ componentId, overridableProps }) {
+  const {
+    element: { id: elementId },
+    elementType
+  } = (0, import_editor_editing_panel.useElement)();
+  const { value, bind } = (0, import_editor_controls.useBoundProp)();
+  const { value: overridableValue, setValue: setOverridableValue } = (0, import_editor_controls.useBoundProp)(componentOverridablePropTypeUtil);
+  const popupState = (0, import_ui9.usePopupState)({
+    variant: "popover"
+  });
+  const triggerProps = (0, import_ui9.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui9.bindPopover)(popupState);
+  const { elType } = (0, import_editor_elements5.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(import_ui9.Tooltip, { placement: "top", title: (0, import_i18n11.__)("Override Property", "elementor") }, /* @__PURE__ */ React13.createElement(
+    Indicator,
+    {
+      triggerProps,
+      isOpen: !!popoverProps.open,
+      isOverridable: !!overridableValue
+    }
+  )), /* @__PURE__ */ React13.createElement(
+    import_ui9.Popover,
+    {
+      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
+var import_editor_mcp2 = require("@elementor/editor-mcp");
+
+// src/mcp/save-as-component-tool.ts
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_schema3 = require("@elementor/schema");
+var InputSchema = {
+  element_id: import_schema3.z.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: import_schema3.z.string().describe("The name for the new component. Should be descriptive and unique among existing components.")
+};
+var OutputSchema = {
+  message: import_schema3.z.string().optional().describe("Additional information about the operation result"),
+  component_uid: import_schema3.z.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 = (0, import_editor_elements6.getContainer)(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 (0, import_editor_mcp.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 } = (0, import_editor_mcp2.getMCPByDomain)("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
+var import_react9 = require("react");
+var import_store23 = require("@elementor/store");
+function PopulateStore() {
+  (0, import_react9.useEffect)(() => {
+    (0, import_store23.__dispatch)(loadComponents());
+  }, []);
+  return null;
+}
+
+// src/store/components-styles-provider.ts
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_store24 = require("@elementor/store");
+var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
+  key: "components-styles",
+  priority: 100,
+  subscribe: (cb) => (0, import_store24.__subscribeWithSelector)(
+    (state) => state[SLICE_NAME],
+    () => {
+      cb();
+    }
+  ),
+  actions: {
+    all: () => {
+      return selectFlatStyles((0, import_store24.__getState)());
+    },
+    get: (id) => {
+      return selectFlatStyles((0, import_store24.__getState)()).find((style) => style.id === id) ?? null;
+    }
+  }
+});
+
+// src/store/remove-component-styles.ts
+var import_store26 = require("@elementor/store");
+function removeComponentStyles(id) {
+  apiClient.invalidateComponentConfigCache(id);
+  (0, import_store26.__dispatch)(slice.actions.removeStyles({ id }));
+}
+
+// src/sync/create-components-before-save.ts
+var import_editor_elements7 = require("@elementor/editor-elements");
+var import_store28 = require("@elementor/store");
+async function createComponentsBeforeSave({
+  container,
+  status
+}) {
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store28.__getState)());
+  if (!unpublishedComponents.length) {
+    return;
+  }
+  try {
+    const uidToComponentId = await createComponents(unpublishedComponents, status);
+    const elements = container.model.get("elements").toJSON();
+    updateComponentInstances(elements, uidToComponentId);
+    (0, import_store28.__dispatch)(
+      slice.actions.add(
+        unpublishedComponents.map((component) => ({
+          id: uidToComponentId.get(component.uid),
+          name: component.name,
+          uid: component.uid
+        }))
+      )
+    );
+    (0, import_store28.__dispatch)(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) {
+  (0, import_editor_elements7.updateElementSettings)({
+    id: elementId,
+    props: {
+      component_instance: {
+        $$type: "component-instance",
+        value: { component_id: componentId }
+      }
+    },
+    withHistory: false
+  });
+}
+
+// src/sync/update-components-before-save.ts
+var import_editor_documents6 = require("@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(import_editor_documents6.isDocumentDirty).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() {
+  import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
+  (0, import_store30.__registerSlice)(slice);
+  (0, import_editor_canvas6.registerElementType)(
+    TYPE,
+    (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
+  );
+  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
+    const document = (0, import_editor_documents7.getV1CurrentDocument)();
+    if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
+      args.mode = "autosave";
+    }
+    return true;
+  });
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "preview/drop", onElementDrop);
+  window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n3.__)("Components", "elementor"),
-    component: ComponentsTab
+    label: (0, import_i18n12.__)("Components", "elementor"),
+    component: Components
   });
   (0, import_editor.injectIntoTop)({
     id: "create-component-popup",
     component: CreateComponentForm
   });
+  (0, import_editor.injectIntoLogic)({
+    id: "components-populate-store",
+    component: PopulateStore
+  });
+  (0, import_editor.injectIntoTop)({
+    id: "edit-component",
+    component: EditComponent
+  });
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    const { id, config } = (0, import_editor_documents7.getV1CurrentDocument)();
+    if (id) {
+      removeComponentStyles(id);
+    }
+    await loadComponentsAssets(config?.elements ?? []);
+  });
+  (0, import_editor_editing_panel2.registerFieldIndicator)({
+    fieldType: import_editor_editing_panel2.FIELD_TYPE.SETTINGS,
+    id: "component-overridable-prop",
+    priority: 1,
+    indicator: OverridablePropIndicator
+  });
+  import_editor_canvas6.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
+  import_editor_canvas6.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
+  initMcp();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {