@elementor/editor-components 4.0.0-564 → 4.0.0-591

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-564",
+  "version": "4.0.0-591",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-564",
-    "@elementor/editor-canvas": "4.0.0-564",
-    "@elementor/editor-controls": "4.0.0-564",
-    "@elementor/editor-documents": "4.0.0-564",
-    "@elementor/editor-editing-panel": "4.0.0-564",
-    "@elementor/editor-elements": "4.0.0-564",
-    "@elementor/editor-elements-panel": "4.0.0-564",
-    "@elementor/editor-mcp": "4.0.0-564",
-    "@elementor/editor-panels": "4.0.0-564",
-    "@elementor/editor-props": "4.0.0-564",
-    "@elementor/editor-styles-repository": "4.0.0-564",
-    "@elementor/editor-ui": "4.0.0-564",
-    "@elementor/editor-v1-adapters": "4.0.0-564",
-    "@elementor/http-client": "4.0.0-564",
+    "@elementor/editor": "4.0.0-591",
+    "@elementor/editor-canvas": "4.0.0-591",
+    "@elementor/editor-controls": "4.0.0-591",
+    "@elementor/editor-documents": "4.0.0-591",
+    "@elementor/editor-editing-panel": "4.0.0-591",
+    "@elementor/editor-elements": "4.0.0-591",
+    "@elementor/editor-elements-panel": "4.0.0-591",
+    "@elementor/editor-mcp": "4.0.0-591",
+    "@elementor/editor-templates": "4.0.0-591",
+    "@elementor/editor-panels": "4.0.0-591",
+    "@elementor/editor-props": "4.0.0-591",
+    "@elementor/editor-styles-repository": "4.0.0-591",
+    "@elementor/editor-ui": "4.0.0-591",
+    "@elementor/editor-v1-adapters": "4.0.0-591",
+    "@elementor/http-client": "4.0.0-591",
     "@elementor/icons": "^1.63.0",
-    "@elementor/events": "4.0.0-564",
-    "@elementor/query": "4.0.0-564",
-    "@elementor/schema": "4.0.0-564",
-    "@elementor/store": "4.0.0-564",
+    "@elementor/events": "4.0.0-591",
+    "@elementor/query": "4.0.0-591",
+    "@elementor/schema": "4.0.0-591",
+    "@elementor/store": "4.0.0-591",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-564",
+    "@elementor/utils": "4.0.0-591",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-564",
-    "@elementor/editor-current-user": "4.0.0-564"
+    "@elementor/editor-notifications": "4.0.0-591",
+    "@elementor/editor-current-user": "4.0.0-591"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/components-tab/components-item.tsx

@@ -23,18 +23,18 @@ import { __ } from '@wordpress/i18n';
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { archiveComponent } from '../../store/actions/archive-component';
 import { loadComponentsAssets } from '../../store/actions/load-components-assets';
+import { renameComponent } from '../../store/actions/rename-component';
 import { type Component } from '../../types';
 import { validateComponentName } from '../../utils/component-name-validation';
+import { createComponentModel } from '../../utils/create-component-model';
 import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
-import { createComponentModel } from '../create-component-form/utils/replace-element-with-component';
 import { DeleteConfirmationDialog } from './delete-confirmation-dialog';
 
 type ComponentItemProps = {
 	component: Omit< Component, 'id' > & { id?: number };
-	renameComponent: ( newName: string ) => void;
 };
 
-export const ComponentItem = ( { component, renameComponent }: ComponentItemProps ) => {
+export const ComponentItem = ( { component }: ComponentItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 	const { canRename, canDelete } = useComponentsPermissions();
@@ -49,9 +49,10 @@ export const ComponentItem = ( { component, renameComponent }: ComponentItemProp
 		getProps: getEditableProps,
 	} = useEditable( {
 		value: component.name,
-		onSubmit: renameComponent,
+		onSubmit: ( newName: string ) => renameComponent( component.uid, newName ),
 		validation: validateComponentTitle,
 	} );
+
 	const componentModel = createComponentModel( component );
 
 	const popupState = usePopupState( {

package/src/components/components-tab/components-list.tsx

@@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
-import { renameComponent } from '../../store/actions/rename-component';
 import { ComponentItem } from './components-item';
 import { LoadingComponents } from './loading-components';
 import { useSearch } from './search-provider';
@@ -25,24 +24,17 @@ export function ComponentsList() {
 	if ( isLoading ) {
 		return <LoadingComponents />;
 	}
-	const isEmpty = ! components || components.length === 0;
+
+	const isEmpty = ! components?.length;
+
 	if ( isEmpty ) {
-		if ( searchValue.length > 0 ) {
-			return <EmptySearchResult />;
-		}
-		return <EmptyState />;
+		return searchValue.length ? <EmptySearchResult /> : <EmptyState />;
 	}
 
 	return (
 		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
 			{ components.map( ( component ) => (
-				<ComponentItem
-					key={ component.uid }
-					component={ component }
-					renameComponent={ ( newName ) => {
-						renameComponent( component.uid, newName );
-					} }
-				/>
+				<ComponentItem key={ component.uid } component={ component } />
 			) ) }
 		</List>
 	);

package/src/components/components-tab/loading-components.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Box, ListItemButton, Skeleton, Stack } from '@elementor/ui';
-const ROWS_COUNT = 6;
 
-const rows = Array.from( { length: ROWS_COUNT }, ( _, index ) => index );
+const ROWS = Array.from( { length: 6 }, ( _, index ) => index );
 
 export const LoadingComponents = () => {
 	return (
@@ -26,7 +25,7 @@ export const LoadingComponents = () => {
 				},
 			} }
 		>
-			{ rows.map( ( row ) => (
+			{ ROWS.map( ( row ) => (
 				<ListItemButton
 					key={ row }
 					sx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { ControlAdornmentsProvider } from '@elementor/editor-controls';
-import { getFieldIndicators } from '@elementor/editor-editing-panel';
-import { useSelectedElement } from '@elementor/editor-elements';
+import { getFieldIndicators, useElement } from '@elementor/editor-editing-panel';
+import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
 import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { EllipsisWithTooltip } from '@elementor/editor-ui';
 import { ComponentsIcon, PencilIcon } from '@elementor/icons';
 import { Box, Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useComponentInstanceSettings } from '../../hooks/use-component-instance-settings';
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
+import {
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../../prop-types/component-instance-prop-type';
 import { ComponentInstanceProvider } from '../../provider/component-instance-context';
 import { useComponent } from '../../store/store';
 import { type OverridablePropsGroup } from '../../types';
@@ -28,9 +31,10 @@ export function InstanceEditingPanel() {
 	const overrides = settings?.overrides?.value;
 
 	const component = useComponent( componentId ?? null );
-	const overridableProps = useSanitizeOverridableProps( componentId ?? null );
 
-	const componentInstanceId = useSelectedElement()?.element?.id ?? null;
+	const componentInstanceId = useSelectedElement()?.element?.id;
+
+	const overridableProps = useSanitizeOverridableProps( componentId ?? null, componentInstanceId );
 
 	if ( ! componentId || ! overridableProps || ! component ) {
 		return null;
@@ -89,3 +93,11 @@ export function InstanceEditingPanel() {
 		</Box>
 	);
 }
+
+function useComponentInstanceSettings() {
+	const { element } = useElement();
+
+	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
+
+	return componentInstancePropTypeUtil.extract( settings );
+}

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -16,7 +16,7 @@ import {
 	SettingsField,
 	useElement,
 } from '@elementor/editor-editing-panel';
-import { type Control, getContainer, getElementType } from '@elementor/editor-elements';
+import { type Control, getElementType } from '@elementor/editor-elements';
 import { type PropType, type PropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
 
@@ -43,6 +43,7 @@ import { OverridablePropProvider } from '../../provider/overridable-prop-context
 import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
 import { useCurrentComponentId } from '../../store/store';
 import { type OriginPropFields, type OverridableProp, type OverridableProps } from '../../types';
+import { getContainerByOriginId } from '../../utils/get-container-by-origin-id';
 import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
 import { getMatchingOverride } from '../../utils/overridable-props-utils';
 import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
@@ -167,14 +168,19 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 		overridableProp.label
 	);
 
-	const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
+	const {
+		elementId: originElementId,
+		widgetType,
+		elType,
+		propKey,
+	} = overridableProp.originPropFields ?? overridableProp;
 
-	const elementContainer = getContainer( elementId );
-	if ( ! elementContainer ) {
-		throw new OverrideControlInnerElementNotFoundError( {
-			context: { componentId, elementId },
-		} );
+	const element = getContainerByOriginId( originElementId, componentInstanceElement.element.id );
+
+	if ( ! element ) {
+		throw new OverrideControlInnerElementNotFoundError( { context: { componentId, elementId: originElementId } } );
 	}
+	const elementId = element.id;
 
 	const type = elType === 'widget' ? widgetType : elType;
 	const elementType = getElementType( type );

package/src/components/instance-editing-panel/use-resolved-origin-value.tsx

@@ -5,8 +5,8 @@ import { type ComponentInstanceOverride } from '../../prop-types/component-insta
 import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
 import { selectData } from '../../store/store';
 import { type OverridableProp, type PublishedComponent } from '../../types';
+import { getOverridableProp } from '../../utils/get-overridable-prop';
 import { extractInnerOverrideInfo } from '../../utils/overridable-props-utils';
-import { getOverridableProp } from '../overridable-props/utils/get-overridable-prop';
 
 export function useResolvedOriginValue( override: ComponentInstanceOverride | null, overridableProp: OverridableProp ) {
 	const components = useSelector( selectData );

package/src/components/load-template-components.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLoadedTemplates } from '@elementor/editor-templates';
+
+import { loadComponentsAssets } from '../store/actions/load-components-assets';
+
+export const LoadTemplateComponents = () => {
+	const templates = useLoadedTemplates();
+
+	useEffect( () => {
+		loadComponentsAssets( templates.flatMap( ( elements ) => elements ?? [] ) );
+	}, [ templates ] );
+
+	return null;
+};

package/src/create-component-type.ts

@@ -11,6 +11,7 @@ import {
 	type RenderContext,
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
 import { __getState as getState } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
@@ -18,6 +19,7 @@ import { apiClient } from './api';
 import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
 import { type ComponentsSlice, selectComponentByUid } from './store/store';
 import { type ComponentRenderContext, type ExtendedWindow } from './types';
+import { formatComponentElementsId } from './utils/format-component-elements-id';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -152,7 +154,7 @@ function createComponentView(
 			const componentInstance = settings.component_instance as
 				| {
 						overrides?: Record< string, unknown >;
-						elements?: unknown[];
+						elements?: V1ElementData[];
 				  }
 				| undefined;
 
@@ -161,7 +163,11 @@ function createComponentView(
 					overrides: componentInstance.overrides ?? {},
 				};
 
-				this.collection = legacyWindow.elementor.createBackboneElementsCollection( componentInstance.elements );
+				const instanceId = this.model.get( 'id' );
+				const elements = componentInstance.elements ?? [];
+				const formattedElements = formatComponentElementsId( elements, [ instanceId ] );
+
+				this.collection = legacyWindow.elementor.createBackboneElementsCollection( formattedElements );
 
 				this.collection.models.forEach( setInactiveRecursively );
 

package/src/{components → extended/components}/component-panel-header/component-panel-header.tsx

@@ -8,12 +8,12 @@ import { __getState as getState } from '@elementor/store';
 import { Box, Divider, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
+import { type ComponentsSlice, SLICE_NAME, useCurrentComponent } from '../../../store/store';
+import { trackComponentEvent } from '../../../utils/tracking';
 import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
-import { type ComponentsSlice, SLICE_NAME, useCurrentComponent } from '../../store/store';
-import { trackComponentEvent } from '../../utils/tracking';
+import { ComponentIntroduction } from '../component-introduction';
 import { usePanelActions } from '../component-properties-panel/component-properties-panel';
-import { ComponentIntroduction } from '../components-tab/component-introduction';
 import { ComponentsBadge } from './component-badge';
 
 const MESSAGE_KEY = 'components-properties-introduction';

package/src/{components → extended/components}/component-properties-panel/component-properties-panel-content.tsx

@@ -7,14 +7,14 @@ import { Divider, IconButton, List, Stack, Tooltip } from '@elementor/ui';
 import { generateUniqueId } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
-import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
+import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
+import { useCurrentComponentId } from '../../../store/store';
 import { addOverridableGroup } from '../../store/actions/add-overridable-group';
 import { deleteOverridableGroup } from '../../store/actions/delete-overridable-group';
 import { deleteOverridableProp } from '../../store/actions/delete-overridable-prop';
 import { reorderGroupProps } from '../../store/actions/reorder-group-props';
 import { reorderOverridableGroups } from '../../store/actions/reorder-overridable-groups';
 import { updateOverridablePropParams } from '../../store/actions/update-overridable-prop-params';
-import { useCurrentComponentId } from '../../store/store';
 import { PropertiesEmptyState } from './properties-empty-state';
 import { PropertiesGroup } from './properties-group';
 import { SortableItem, SortableProvider } from './sortable';

package/src/{components → extended/components}/component-properties-panel/properties-empty-state.tsx

@@ -4,7 +4,7 @@ import { ComponentPropListIcon } from '@elementor/icons';
 import { Link, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { ComponentIntroduction } from '../components-tab/component-introduction';
+import { ComponentIntroduction } from '../component-introduction';
 
 export function PropertiesEmptyState( { introductionRef }: { introductionRef: React.RefObject< HTMLButtonElement > } ) {
 	const [ isOpen, setIsOpen ] = useState( false );

package/src/{components → extended/components}/component-properties-panel/properties-group.tsx

@@ -15,7 +15,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type OverridableProp, type OverridablePropsGroup } from '../../types';
+import { type OverridableProp, type OverridablePropsGroup } from '../../../types';
 import { PropertyItem } from './property-item';
 import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
 import { type GroupLabelEditableState } from './use-current-editable-item';

package/src/{components → extended/components}/component-properties-panel/property-item.tsx

@@ -3,7 +3,7 @@ import { getWidgetsCache } from '@elementor/editor-elements';
 import { XIcon } from '@elementor/icons';
 import { bindPopover, bindTrigger, Box, IconButton, Popover, Typography, usePopupState } from '@elementor/ui';
 
-import { type OverridableProp } from '../../types';
+import { type OverridableProp } from '../../../types';
 import { OverridablePropForm } from '../overridable-props/overridable-prop-form';
 import { SortableTrigger, type SortableTriggerProps } from './sortable';
 

package/src/{components → extended/components}/component-properties-panel/use-current-editable-item.ts

@@ -4,8 +4,8 @@ import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { useEditable } from '@elementor/editor-ui';
 import { __ } from '@wordpress/i18n';
 
+import { useCurrentComponentId, useOverridableProps } from '../../../store/store';
 import { renameOverridableGroup } from '../../store/actions/rename-overridable-group';
-import { useCurrentComponentId, useOverridableProps } from '../../store/store';
 import { validateGroupLabel } from './utils/validate-group-label';
 
 export type GroupLabelEditableState = {

package/src/{components → extended/components}/component-properties-panel/utils/generate-unique-label.ts

@@ -1,4 +1,4 @@
-import { type OverridablePropsGroup } from '../../../types';
+import { type OverridablePropsGroup } from '../../../../types';
 
 const DEFAULT_NEW_GROUP_LABEL = 'New group';
 

package/src/{components → extended/components}/component-properties-panel/utils/validate-group-label.ts

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 
-import { type OverridablePropsGroup } from '../../../types';
+import { type OverridablePropsGroup } from '../../../../types';
 
 export const ERROR_MESSAGES = {
 	EMPTY_NAME: __( 'Group name is required', 'elementor' ),

package/src/{components → extended/components}/create-component-form/create-component-form.tsx

@@ -8,13 +8,13 @@ import { __getState as getState } from '@elementor/store';
 import { Button, FormLabel, Grid, Popover, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useComponents } from '../../hooks/use-components';
+import { useComponents } from '../../../hooks/use-components';
+import { selectComponentByUid } from '../../../store/store';
+import { type ComponentFormValues, type PublishedComponent } from '../../../types';
+import { switchToComponent } from '../../../utils/switch-to-component';
+import { trackComponentEvent } from '../../../utils/tracking';
 import { findNonAtomicElementsInElement } from '../../prevent-non-atomic-nesting';
 import { createUnpublishedComponent } from '../../store/actions/create-unpublished-component';
-import { selectComponentByUid } from '../../store/store';
-import { type ComponentFormValues, type PublishedComponent } from '../../types';
-import { switchToComponent } from '../../utils/switch-to-component';
-import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
 import {

package/src/{components → extended/components}/edit-component/component-modal.tsx

@@ -3,8 +3,8 @@ import { type CSSProperties, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { __ } from '@wordpress/i18n';
 
-import { useCanvasDocument } from '../../hooks/use-canvas-document';
-import { useElementRect } from '../../hooks/use-element-rect';
+import { useCanvasDocument } from './use-canvas-document';
+import { useElementRect } from './use-element-rect';
 
 type ModalProps = {
 	topLevelElementDom: HTMLElement | null;

package/src/{components → extended/components}/edit-component/edit-component.tsx

@@ -6,12 +6,12 @@ import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/edito
 import { __useSelector as useSelector } from '@elementor/store';
 import { throttle } from '@elementor/utils';
 
-import { apiClient } from '../../api';
+import { apiClient } from '../../../api';
+import { type ComponentsPathItem, selectPath, useCurrentComponentId } from '../../../store/store';
+import { COMPONENT_DOCUMENT_TYPE } from '../../consts';
 import { useNavigateBack } from '../../hooks/use-navigate-back';
 import { resetSanitizedComponents } from '../../store/actions/reset-sanitized-components';
 import { updateCurrentComponent } from '../../store/actions/update-current-component';
-import { type ComponentsPathItem, selectPath, useCurrentComponentId } from '../../store/store';
-import { COMPONENT_DOCUMENT_TYPE } from '../consts';
 import { ComponentModal } from './component-modal';
 
 export function EditComponent() {

package/src/{components → extended/components}/overridable-props/overridable-prop-control.tsx

@@ -11,16 +11,16 @@ import {
 import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
 import { type PropValue } from '@elementor/editor-props';
 
-import { type ComponentInstanceOverridePropValue } from '../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverridePropValue } from '../../../prop-types/component-instance-override-prop-type';
 import {
 	componentOverridablePropTypeUtil,
 	type ComponentOverridablePropValue,
-} from '../../prop-types/component-overridable-prop-type';
-import { OverridablePropProvider } from '../../provider/overridable-prop-context';
-import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
-import { useCurrentComponentId, useOverridableProps } from '../../store/store';
-import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
-import { OVERRIDABLE_PROP_REPLACEMENT_ID } from '../consts';
+} from '../../../prop-types/component-overridable-prop-type';
+import { OverridablePropProvider } from '../../../provider/overridable-prop-context';
+import { updateOverridableProp } from '../../../store/actions/update-overridable-prop';
+import { useCurrentComponentId, useOverridableProps } from '../../../store/store';
+import { getPropTypeForComponentOverride } from '../../../utils/get-prop-type-for-component-override';
+import { OVERRIDABLE_PROP_REPLACEMENT_ID } from '../../consts';
 
 export function OverridablePropControl< T extends object >( {
 	OriginalControl,

package/src/{components → extended/components}/overridable-props/overridable-prop-form.tsx

@@ -4,7 +4,7 @@ import { Form, MenuListItem } from '@elementor/editor-ui';
 import { Button, FormLabel, Grid, Select, Stack, type SxProps, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type OverridableProp } from '../../types';
+import { type OverridableProp } from '../../../types';
 import { validatePropLabel } from './utils/validate-prop-label';
 
 const SIZE = 'tiny';

package/src/{components → extended/components}/overridable-props/overridable-prop-indicator.tsx

@@ -6,16 +6,16 @@ import { type PropType, type TransformablePropValue } from '@elementor/editor-pr
 import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useSanitizeOverridableProps } from '../../hooks/use-sanitize-overridable-props';
-import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
-import { useComponentInstanceElement, useOverridablePropValue } from '../../provider/overridable-prop-context';
+import { useSanitizeOverridableProps } from '../../../hooks/use-sanitize-overridable-props';
+import { componentOverridablePropTypeUtil } from '../../../prop-types/component-overridable-prop-type';
+import { useComponentInstanceElement, useOverridablePropValue } from '../../../provider/overridable-prop-context';
+import { useCurrentComponentId } from '../../../store/store';
+import { type OverridableProps } from '../../../types';
+import { getOverridableProp } from '../../../utils/get-overridable-prop';
+import { resolveOverridePropValue } from '../../../utils/resolve-override-prop-value';
 import { setOverridableProp } from '../../store/actions/set-overridable-prop';
-import { useCurrentComponentId } from '../../store/store';
-import { type OverridableProps } from '../../types';
-import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
 import { Indicator } from './indicator';
 import { OverridablePropForm } from './overridable-prop-form';
-import { getOverridableProp } from './utils/get-overridable-prop';
 
 export function OverridablePropIndicator() {
 	const { propType } = useBoundProp();

package/src/{components → extended}/consts.ts

@@ -1,2 +1,3 @@
-export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
 export const OVERRIDABLE_PROP_REPLACEMENT_ID = 'overridable-prop';
+
+export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';

package/src/{hooks → extended/hooks}/use-navigate-back.ts

@@ -2,8 +2,8 @@ import { useCallback } from 'react';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
 import { __useSelector as useSelector } from '@elementor/store';
 
-import { selectPath } from '../store/store';
-import { switchToComponent } from '../utils/switch-to-component';
+import { selectPath } from '../../store/store';
+import { switchToComponent } from '../../utils/switch-to-component';
 
 export function useNavigateBack() {
 	const path = useSelector( selectPath );

package/src/extended/init.ts

@@ -0,0 +1,77 @@
+import { injectIntoTop } from '@elementor/editor';
+import { registerControlReplacement } from '@elementor/editor-controls';
+import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { FIELD_TYPE, injectIntoPanelHeaderTop, registerFieldIndicator } from '@elementor/editor-editing-panel';
+import { __registerPanel as registerPanel } from '@elementor/editor-panels';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
+
+import { componentOverridablePropTypeUtil } from '../prop-types/component-overridable-prop-type';
+import { type ExtendedWindow } from '../types';
+import { onElementDrop } from '../utils/tracking';
+import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
+import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
+import { CreateComponentForm } from './components/create-component-form/create-component-form';
+import { EditComponent } from './components/edit-component/edit-component';
+import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
+import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
+import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './consts';
+import { initMcp } from './mcp';
+import { initNonAtomicNestingPrevention } from './prevent-non-atomic-nesting';
+import { beforeSave } from './sync/before-save';
+import { initCleanupOverridablePropsOnDelete } from './sync/cleanup-overridable-props-on-delete';
+import { initHandleComponentEditModeContainer } from './sync/handle-component-edit-mode-container';
+import { initRevertOverridablesOnCopyOrDuplicate } from './sync/revert-overridables-on-copy-or-duplicate';
+
+export function initExtended() {
+	registerPanel( componentPropertiesPanel );
+
+	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
+		const document = getV1CurrentDocument();
+		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {
+			args.mode = 'autosave';
+		}
+		return true;
+	} );
+
+	registerDataHook( 'after', 'preview/drop', onElementDrop );
+
+	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;
+
+	injectIntoTop( {
+		id: 'create-component-popup',
+		component: CreateComponentForm,
+	} );
+
+	injectIntoTop( {
+		id: 'edit-component',
+		component: EditComponent,
+	} );
+
+	injectIntoPanelHeaderTop( {
+		id: 'component-panel-header',
+		component: ComponentPanelHeader,
+	} );
+
+	registerFieldIndicator( {
+		fieldType: FIELD_TYPE.SETTINGS,
+		id: 'component-overridable-prop',
+		priority: 1,
+		indicator: OverridablePropIndicator,
+	} );
+
+	registerControlReplacement( {
+		id: OVERRIDABLE_PROP_REPLACEMENT_ID,
+		component: OverridablePropControl,
+		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
+	} );
+
+	initCleanupOverridablePropsOnDelete();
+
+	initMcp();
+
+	initNonAtomicNestingPrevention();
+
+	initHandleComponentEditModeContainer();
+
+	initRevertOverridablesOnCopyOrDuplicate();
+}

package/src/{mcp → extended/mcp}/save-as-component-tool.ts

@@ -6,9 +6,9 @@ import { AxiosError } from '@elementor/http-client';
 import { z } from '@elementor/schema';
 import { generateUniqueId } from '@elementor/utils';
 
-import { apiClient } from '../api';
+import { apiClient } from '../../api';
+import { type OverridableProps } from '../../types';
 import { createUnpublishedComponent } from '../store/actions/create-unpublished-component';
-import { type OverridableProps } from '../types';
 
 const InputSchema = {
 	element_id: z