@elementor/editor-components 3.35.0-399 → 3.35.0-400

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __25 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer, RenderContext } from "@elementor/editor-canvas";
@@ -2272,10 +2272,125 @@ var COMPONENT_DOCUMENT_TYPE = "elementor_component";
 import * as React17 from "react";
 import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState7 } from "react";
 import { getElementLabel } from "@elementor/editor-elements";
+import { notify as notify2 } from "@elementor/editor-notifications";
 import { Form as FormElement, ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
 import { Alert as Alert2, Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Popover as Popover3, Snackbar, Stack as Stack11, TextField as TextField3, Typography as Typography9 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
+
+// src/prevent-non-atomic-nesting.ts
+import { isAtomicWidget } from "@elementor/editor-canvas";
+import { getAllDescendants, getElementType } from "@elementor/editor-elements";
+import { notify } from "@elementor/editor-notifications";
+import { blockCommand } from "@elementor/editor-v1-adapters";
+import { __getStore as getStore2 } from "@elementor/store";
+import { __ as __16 } from "@wordpress/i18n";
+var NON_ATOMIC_ELEMENT_ALERT = {
+  type: "default",
+  message: __16("Cannot add this element here - only atomic elements are allowed inside components.", "elementor"),
+  id: "non-atomic-element-blocked"
+};
+function initNonAtomicNestingPrevention() {
+  blockCommand({
+    command: "document/elements/create",
+    condition: blockNonAtomicCreate
+  });
+  blockCommand({
+    command: "document/elements/move",
+    condition: blockNonAtomicMove
+  });
+  blockCommand({
+    command: "document/elements/paste",
+    condition: blockNonAtomicPaste
+  });
+}
+function isEditingComponent() {
+  const state = getStore2()?.getState();
+  if (!state) {
+    return false;
+  }
+  return selectCurrentComponentId(state) !== null;
+}
+function isElementAtomic(elementType) {
+  return getElementType(elementType) !== null;
+}
+function blockNonAtomicCreate(args) {
+  if (!isEditingComponent()) {
+    return false;
+  }
+  const { model } = args;
+  const elementType = model?.widgetType || model?.elType;
+  if (!elementType) {
+    return false;
+  }
+  if (isElementAtomic(elementType)) {
+    return false;
+  }
+  notify(NON_ATOMIC_ELEMENT_ALERT);
+  return true;
+}
+function blockNonAtomicMove(args) {
+  if (!isEditingComponent()) {
+    return false;
+  }
+  const { containers = [args.container] } = args;
+  const hasNonAtomicElement = containers.some((container) => {
+    if (!container) {
+      return false;
+    }
+    const allElements = getAllDescendants(container);
+    return allElements.some((element) => !isAtomicWidget(element));
+  });
+  if (hasNonAtomicElement) {
+    notify(NON_ATOMIC_ELEMENT_ALERT);
+  }
+  return hasNonAtomicElement;
+}
+function blockNonAtomicPaste(args) {
+  if (!isEditingComponent()) {
+    return false;
+  }
+  const { storageType } = args;
+  if (storageType !== "localstorage") {
+    return false;
+  }
+  const data = window?.elementorCommon?.storage?.get();
+  if (!data?.clipboard?.elements) {
+    return false;
+  }
+  const hasNonAtomicElement = hasNonAtomicElementsInTree(data.clipboard.elements);
+  if (hasNonAtomicElement) {
+    notify(NON_ATOMIC_ELEMENT_ALERT);
+  }
+  return hasNonAtomicElement;
+}
+function hasNonAtomicElementsInTree(elements) {
+  for (const element of elements) {
+    const elementType = element.widgetType || element.elType;
+    if (elementType && !isElementAtomic(elementType)) {
+      return true;
+    }
+    if (element.elements?.length) {
+      if (hasNonAtomicElementsInTree(element.elements)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function findNonAtomicElementsInElement(element) {
+  const nonAtomicElements = [];
+  const elementType = element.widgetType || element.elType;
+  if (elementType && !isElementAtomic(elementType)) {
+    nonAtomicElements.push(elementType);
+  }
+  if (element.elements?.length) {
+    for (const child of element.elements) {
+      nonAtomicElements.push(...findNonAtomicElementsInElement(child));
+    }
+  }
+  return [...new Set(nonAtomicElements)];
+}
 
 // src/store/actions/create-unpublished-component.ts
 import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
@@ -2353,16 +2468,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 import { z } from "@elementor/schema";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return z.object({
     componentName: z.string().trim().max(
       MAX_NAME_LENGTH,
-      __16("Component name is too long. Please keep it under 50 characters.", "elementor")
+      __17("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: __16("Component name already exists", "elementor")
+      message: __17("Component name already exists", "elementor")
     })
   });
 };
@@ -2370,9 +2485,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: __16("Component name is required.", "elementor")
+      message: __17("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: __16("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: __17("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -2415,6 +2530,18 @@ function CreateComponentForm() {
   useEffect2(() => {
     const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = "elementor/editor/open-save-as-component-form";
     const openPopup = (event) => {
+      const nonAtomicElements = findNonAtomicElementsInElement(event.detail.element);
+      if (nonAtomicElements.length > 0) {
+        notify2({
+          type: "default",
+          message: __18(
+            "Cannot save as component - contains non-supported elements. Only atomic elements are allowed inside components.",
+            "elementor"
+          ),
+          id: "non-atomic-element-save-blocked"
+        });
+        return;
+      }
       setElement({ element: event.detail.element, elementLabel: getElementLabel(event.detail.element.id) });
       setAnchorPosition(event.detail.anchorPosition);
       eventData.current = getComponentEventData(event.detail.element, event.detail.options);
@@ -2437,12 +2564,12 @@ function CreateComponentForm() {
       setResultNotification({
         show: true,
         // Translators: %1$s: Component name, %2$s: Component UID
-        message: __17("Component saved successfully as: %1$s (UID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", uid),
+        message: __18("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 = __17("Failed to save component. Please try again.", "elementor");
+      const errorMessage = __18("Failed to save component. Please try again.", "elementor");
       setResultNotification({
         show: true,
         message: errorMessage,
@@ -2513,10 +2640,10 @@ var Form2 = ({
     }
   };
   const texts = {
-    heading: __17("Save as a component", "elementor"),
-    name: __17("Name", "elementor"),
-    cancel: __17("Cancel", "elementor"),
-    create: __17("Create", "elementor")
+    heading: __18("Save as a component", "elementor"),
+    name: __18("Name", "elementor"),
+    cancel: __18("Cancel", "elementor"),
+    create: __18("Create", "elementor")
   };
   const nameInputId = "component-name";
   return /* @__PURE__ */ React17.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React17.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React17.createElement(
@@ -2555,12 +2682,12 @@ import { throttle as throttle2 } from "@elementor/utils";
 
 // src/store/actions/update-current-component.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus5 } from "@elementor/editor-documents";
-import { __getStore as getStore2 } from "@elementor/store";
+import { __getStore as getStore3 } from "@elementor/store";
 function updateCurrentComponent({
   path,
   currentComponentId
 }) {
-  const dispatch16 = getStore2()?.dispatch;
+  const dispatch16 = getStore3()?.dispatch;
   if (!dispatch16) {
     return;
   }
@@ -2572,7 +2699,7 @@ function updateCurrentComponent({
 import * as React18 from "react";
 import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/hooks/use-canvas-document.ts
 import { getCanvasIframeDocument } from "@elementor/editor-canvas";
@@ -2694,7 +2821,7 @@ function Backdrop({ canvas, element, onClose }) {
       onKeyDown: handleKeyDown,
       role: "button",
       tabIndex: 0,
-      "aria-label": __18("Exit component editing mode", "elementor")
+      "aria-label": __19("Exit component editing mode", "elementor")
     }
   );
 }
@@ -2814,18 +2941,18 @@ import * as React20 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
 import { Box as Box12, Button as Button4, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack12, Typography as Typography10 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
     component: /* @__PURE__ */ React20.createElement(EditModeDialog, { lockedBy })
   });
 };
 var EditModeDialog = ({ lockedBy }) => {
-  const content = __19("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React20.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(Typography10, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(DialogContent, null, /* @__PURE__ */ React20.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(Typography10, { variant: "body2" }, __19(
+  const content = __20("%s is currently editing this document", "elementor").replace("%s", lockedBy);
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React20.createElement(Box12, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React20.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React20.createElement(Typography10, { variant: "subtitle1" }, content))), /* @__PURE__ */ React20.createElement(DialogContent, null, /* @__PURE__ */ React20.createElement(Stack12, { spacing: 2, direction: "column" }, /* @__PURE__ */ React20.createElement(Typography10, { variant: "body2" }, __20(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React20.createElement(DialogActions, null, /* @__PURE__ */ React20.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __19("Close", "elementor"))))));
+  )), /* @__PURE__ */ React20.createElement(DialogActions, null, /* @__PURE__ */ React20.createElement(Button4, { color: "secondary", variant: "contained", onClick: closeDialog }, __20("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -2836,7 +2963,7 @@ import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-ele
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader2, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { IconButton as IconButton6, Stack as Stack17, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
 import { useElement } from "@elementor/editor-editing-panel";
@@ -2905,7 +3032,7 @@ function useComponentInstanceSettings() {
 import * as React21 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon4, PencilIcon } from "@elementor/icons";
 import { Button as Button5, Stack as Stack13, Typography as Typography11 } from "@elementor/ui";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   return /* @__PURE__ */ React21.createElement(
     Stack13,
@@ -2918,12 +3045,12 @@ var EmptyState2 = ({ onEditComponent }) => {
       gap: 1.5
     },
     /* @__PURE__ */ React21.createElement(ComponentPropListIcon4, { fontSize: "large" }),
-    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "subtitle2" }, __20("No properties yet", "elementor")),
-    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "caption", maxWidth: "170px" }, __20(
+    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "subtitle2" }, __21("No properties yet", "elementor")),
+    /* @__PURE__ */ React21.createElement(Typography11, { align: "center", variant: "caption", maxWidth: "170px" }, __21(
       "Edit the component to add properties, manage them or update the design across all instances.",
       "elementor"
     )),
-    /* @__PURE__ */ React21.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(PencilIcon, { fontSize: "small" }), __20("Edit component", "elementor"))
+    /* @__PURE__ */ React21.createElement(Button5, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React21.createElement(PencilIcon, { fontSize: "small" }), __21("Edit component", "elementor"))
   );
 };
 
@@ -2945,9 +3072,9 @@ import {
 import { Stack as Stack15 } from "@elementor/ui";
 
 // src/hooks/use-controls-by-widget-type.ts
-import { getElementType } from "@elementor/editor-elements";
+import { getElementType as getElementType2 } from "@elementor/editor-elements";
 function useControlsByWidgetType(type) {
-  const elementType = getElementType(type);
+  const elementType = getElementType2(type);
   if (!elementType) {
     return {};
   }
@@ -3201,7 +3328,7 @@ function InstanceEditingPanel() {
   if (!componentId || !overridableProps || !component) {
     return null;
   }
-  const panelTitle = __21("Edit %s", "elementor").replace("%s", component.name);
+  const panelTitle = __22("Edit %s", "elementor").replace("%s", component.name);
   const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
@@ -3284,7 +3411,7 @@ import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { useElement as useElement3 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { bindPopover as bindPopover2, bindTrigger as bindTrigger4, Popover as Popover4, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
 import { __dispatch as dispatch12, __getState as getState13 } from "@elementor/store";
@@ -3355,7 +3482,7 @@ import * as React28 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box14, styled as styled3 } from "@elementor/ui";
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var IconContainer = styled3(Box14)`
 	pointer-events: none;
@@ -3415,7 +3542,7 @@ var Indicator = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __22("Overridable property", "elementor") : __22("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __23("Overridable property", "elementor") : __23("Make prop overridable", "elementor")
   },
   isOverridable ? /* @__PURE__ */ React28.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React28.createElement(PlusIcon, { fontSize: SIZE2 })
 )));
@@ -3486,7 +3613,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __23("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(Tooltip5, { placement: "top", title: __24("Override Property", "elementor") }, /* @__PURE__ */ React29.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React29.createElement(
     Popover4,
     {
       disableScrollLock: true,
@@ -3521,7 +3648,7 @@ function isPropAllowed(bind) {
 }
 
 // src/hooks/regenerate-override-keys.ts
-import { getAllDescendants, getContainer as getContainer3, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getAllDescendants as getAllDescendants2, getContainer as getContainer3, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { generateUniqueId as generateUniqueId5 } from "@elementor/utils";
 function initRegenerateOverrideKeys() {
@@ -3546,7 +3673,7 @@ function regenerateOverrideKeysRecursive(elementId) {
   if (!container) {
     return;
   }
-  getAllDescendants(container).forEach(regenerateOverrideKeys);
+  getAllDescendants2(container).forEach(regenerateOverrideKeys);
 }
 function regenerateOverrideKeys(element) {
   if (!isComponentInstance(element.model.toJSON())) {
@@ -3604,7 +3731,7 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 
 // src/mcp/save-as-component-tool.ts
 import { DOCUMENT_STRUCTURE_URI, WIDGET_SCHEMA_URI } from "@elementor/editor-canvas";
-import { getContainer as getContainer4, getElementType as getElementType2, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementType as getElementType3, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 import { getMCPByDomain, toolPrompts } from "@elementor/editor-mcp";
 import { AxiosError } from "@elementor/http-client";
 import { z as z6 } from "@elementor/schema";
@@ -3686,7 +3813,7 @@ function enrichOverridableProps(input, rootElement) {
     }
     const elType = element.elType;
     const widgetType = element.widgetType || element.elType;
-    const elementType = getElementType2(widgetType);
+    const elementType = getElementType3(widgetType);
     if (!elementType) {
       throw new Error(
         `Element type "${widgetType}" is not atomic or does not have a settings schema. Cannot expose property "${propKey}" for element "${elementId}".`
@@ -3942,27 +4069,27 @@ function PopulateStore() {
 }
 
 // src/prevent-circular-nesting.ts
-import { getAllDescendants as getAllDescendants2 } from "@elementor/editor-elements";
-import { notify } from "@elementor/editor-notifications";
-import { blockCommand } from "@elementor/editor-v1-adapters";
+import { getAllDescendants as getAllDescendants3 } from "@elementor/editor-elements";
+import { notify as notify3 } from "@elementor/editor-notifications";
+import { blockCommand as blockCommand2 } from "@elementor/editor-v1-adapters";
 import { __getState as getState15 } from "@elementor/store";
-import { __ as __24 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 var COMPONENT_TYPE = "e-component";
 var COMPONENT_CIRCULAR_NESTING_ALERT = {
   type: "default",
-  message: __24("Cannot add this component here - it would create a circular reference.", "elementor"),
+  message: __25("Cannot add this component here - it would create a circular reference.", "elementor"),
   id: "circular-component-nesting-blocked"
 };
 function initCircularNestingPrevention() {
-  blockCommand({
+  blockCommand2({
     command: "document/elements/create",
     condition: blockCircularCreate
   });
-  blockCommand({
+  blockCommand2({
     command: "document/elements/move",
     condition: blockCircularMove
   });
-  blockCommand({
+  blockCommand2({
     command: "document/elements/paste",
     condition: blockCircularPaste
   });
@@ -4027,7 +4154,7 @@ function blockCircularCreate(args) {
   }
   const isBlocked = wouldCreateCircularNesting(componentId);
   if (isBlocked) {
-    notify(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return isBlocked;
 }
@@ -4037,7 +4164,7 @@ function blockCircularMove(args) {
     if (!container) {
       return false;
     }
-    const allElements = getAllDescendants2(container);
+    const allElements = getAllDescendants3(container);
     return allElements.some((element) => {
       const componentId = extractComponentIdFromContainer(element);
       if (componentId === null) {
@@ -4047,7 +4174,7 @@ function blockCircularMove(args) {
     });
   });
   if (hasCircularComponent) {
-    notify(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
@@ -4063,7 +4190,7 @@ function blockCircularPaste(args) {
   const allComponentIds = extractComponentIdsFromElements(data.clipboard.elements);
   const hasCircularComponent = allComponentIds.some(wouldCreateCircularNesting);
   if (hasCircularComponent) {
-    notify(COMPONENT_CIRCULAR_NESTING_ALERT);
+    notify3(COMPONENT_CIRCULAR_NESTING_ALERT);
   }
   return hasCircularComponent;
 }
@@ -4196,7 +4323,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 };
 
 // src/sync/update-archived-component-before-save.ts
-import { notify as notify2 } from "@elementor/editor-notifications";
+import { notify as notify4 } from "@elementor/editor-notifications";
 import { __getState as getState19 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
@@ -4220,10 +4347,10 @@ var updateArchivedComponentBeforeSave = async () => {
     const failedIds = result.failedIds.join(", ");
     const successIds = result.successIds.join(", ");
     if (failedIds) {
-      notify2(failedNotification(failedIds));
+      notify4(failedNotification(failedIds));
     }
     if (successIds) {
-      notify2(successNotification(successIds));
+      notify4(successNotification(successIds));
     }
   } catch (error) {
     throw new Error(`Failed to update archived components: ${error}`);
@@ -4277,7 +4404,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __25("Components", "elementor"),
+    label: __26("Components", "elementor"),
     component: Components
   });
   injectIntoTop({
@@ -4324,6 +4451,7 @@ function init() {
   initRegenerateOverrideKeys();
   initMcp();
   initCircularNestingPrevention();
+  initNonAtomicNestingPrevention();
 }
 export {
   init