@elementor/editor-components 3.35.0-340 → 3.35.0-342

package/dist/index.mjs

@@ -9,13 +9,14 @@ import {
   FIELD_TYPE,
   injectIntoPanelHeaderTop,
   registerControlReplacement,
+  registerEditingPanelReplacement,
   registerFieldIndicator
 } from "@elementor/editor-editing-panel";
 import { injectTab } from "@elementor/editor-elements-panel";
 import { stylesRepository } from "@elementor/editor-styles-repository";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 
 // src/component-instance-transformer.ts
 import { createTransformer } from "@elementor/editor-canvas";
@@ -284,27 +285,31 @@ import { __ as __2 } from "@wordpress/i18n";
 // src/hooks/use-navigate-back.ts
 import { useCallback } from "react";
 import { getV1DocumentsManager as getV1DocumentsManager2 } from "@elementor/editor-documents";
-import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 import { __useSelector as useSelector } from "@elementor/store";
+
+// src/utils/switch-to-component.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+function switchToComponent(componentId, componentInstanceId) {
+  runCommand("editor/documents/switch", {
+    id: componentId,
+    selector: componentInstanceId ? `[data-id="${componentInstanceId}"]` : void 0,
+    mode: "autosave",
+    setAsInitial: false,
+    shouldScroll: false
+  });
+}
+
+// src/hooks/use-navigate-back.ts
 function useNavigateBack() {
   const path = useSelector(selectPath);
   const documentsManager = getV1DocumentsManager2();
   return useCallback(() => {
     const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
-    const switchToDocument = (id, selector) => {
-      runCommand("editor/documents/switch", {
-        id,
-        selector,
-        mode: "autosave",
-        setAsInitial: false,
-        shouldScroll: false
-      });
-    };
     if (prevComponentId && prevComponentInstanceId) {
-      switchToDocument(prevComponentId, `[data-id="${prevComponentInstanceId}"]`);
+      switchToComponent(prevComponentId, prevComponentInstanceId);
       return;
     }
-    switchToDocument(documentsManager.getInitialId());
+    switchToComponent(documentsManager.getInitialId());
   }, [path, documentsManager]);
 }
 
@@ -505,7 +510,6 @@ import {
   createTemplatedElementView
 } from "@elementor/editor-canvas";
 import { getCurrentDocument } from "@elementor/editor-documents";
-import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
@@ -643,12 +647,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        runCommand2("editor/documents/switch", {
-          id: this.getComponentId(),
-          mode: "autosave",
-          selector: `[data-id="${this.model.get("id")}"]`,
-          shouldScroll: false
-        });
+        switchToComponent(this.getComponentId(), this.model.get("id"));
       }
     }
     editComponent({ trigger, location, secondaryLocation }) {
@@ -1104,7 +1103,7 @@ import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack5, Tex
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/store/actions/create-unpublished-component.ts
-import { __privateRunCommand as runCommand3 } from "@elementor/editor-v1-adapters";
+import { __privateRunCommand as runCommand2 } from "@elementor/editor-v1-adapters";
 import { __dispatch as dispatch3 } from "@elementor/store";
 import { generateUniqueId } from "@elementor/utils";
 function createUnpublishedComponent(name, element, eventData) {
@@ -1124,7 +1123,7 @@ function createUnpublishedComponent(name, element, eventData) {
     component_name: name,
     ...eventData
   });
-  runCommand3("document/save/auto");
+  runCommand2("document/save/auto");
   return uid;
 }
 
@@ -1652,39 +1651,173 @@ var EditModeDialog = ({ lockedBy }) => {
   )), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __10("Close", "elementor"))))));
 };
 
-// src/components/overridable-props/overridable-prop-control.tsx
-import * as React14 from "react";
-import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
-import { createTopLevelObjectType, useElement } from "@elementor/editor-editing-panel";
-import { __getState as getState6 } from "@elementor/store";
+// src/components/instance-editing-panel/instance-editing-panel.tsx
+import * as React15 from "react";
+import { useElement } from "@elementor/editor-editing-panel";
+import { useElementSetting, useSelectedElement } from "@elementor/editor-elements";
+import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
+import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
+import { __getState as getState5 } from "@elementor/store";
+import { IconButton as IconButton3, Stack as Stack9, Tooltip as Tooltip2 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
-// src/prop-types/component-overridable-prop-type.ts
+// src/prop-types/component-instance-prop-type.ts
+import { createPropUtils as createPropUtils3, numberPropTypeUtil } from "@elementor/editor-props";
+import { z as z4 } from "@elementor/schema";
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
+
+// src/prop-types/component-instance-override-prop-type.ts
 import { createPropUtils } from "@elementor/editor-props";
 import { z as z2 } from "@elementor/schema";
-var componentOverridablePropTypeUtil = createPropUtils(
-  "overridable",
+var componentInstanceOverridePropTypeUtil = createPropUtils(
+  "override",
   z2.object({
     override_key: z2.string(),
-    origin_value: z2.object({
-      $$type: z2.string(),
-      value: z2.unknown()
+    override_value: z2.unknown(),
+    schema_source: z2.object({
+      type: z2.literal("component"),
+      id: z2.number()
+    })
+  })
+);
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = createPropUtils2(
+  "overrides",
+  z3.array(componentInstanceOverridePropTypeUtil.schema)
+);
+
+// src/prop-types/component-instance-prop-type.ts
+var componentInstancePropTypeUtil = createPropUtils3(
+  "component-instance",
+  z4.object({
+    component_id: numberPropTypeUtil.schema,
+    overrides: componentInstanceOverridesPropTypeUtil.schema
+  })
+);
+
+// src/components/instance-editing-panel/empty-state.tsx
+import * as React13 from "react";
+import { ComponentPropListIcon as ComponentPropListIcon2, PencilIcon } from "@elementor/icons";
+import { Button as Button3, Stack as Stack7, Typography as Typography6 } from "@elementor/ui";
+import { __ as __11 } from "@wordpress/i18n";
+var EmptyState2 = ({ onEditComponent }) => {
+  return /* @__PURE__ */ React13.createElement(
+    Stack7,
+    {
+      alignItems: "center",
+      justifyContent: "start",
+      height: "100%",
+      color: "text.secondary",
+      sx: { p: 2.5, pt: 8, pb: 5.5, mt: 1 },
+      gap: 1.5
+    },
+    /* @__PURE__ */ React13.createElement(ComponentPropListIcon2, { fontSize: "large" }),
+    /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "subtitle2" }, __11("No properties yet", "elementor")),
+    /* @__PURE__ */ React13.createElement(Typography6, { align: "center", variant: "caption", maxWidth: "170px" }, __11(
+      "Edit the component to add properties, manage them or update the design across all instances.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React13.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(PencilIcon, { fontSize: "small" }), __11("Edit component", "elementor"))
+  );
+};
+
+// src/components/instance-editing-panel/override-props-group.tsx
+import * as React14 from "react";
+import { useId } from "react";
+import { useStateByElement } from "@elementor/editor-editing-panel";
+import { CollapseIcon } from "@elementor/editor-ui";
+import { Collapse, ListItemButton as ListItemButton3, ListItemText as ListItemText2, Stack as Stack8 } from "@elementor/ui";
+function OverridePropsGroup({ group, props }) {
+  const [isOpen, setIsOpen] = useStateByElement(group.id, true);
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const id = useId();
+  const labelId = `label-${id}`;
+  const contentId = `content-${id}`;
+  const title = group.label;
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    ListItemButton3,
+    {
+      id: labelId,
+      "aria-controls": contentId,
+      "aria-label": `${title} section`,
+      onClick: handleClick,
+      p: 0,
+      sx: { "&:hover": { backgroundColor: "transparent" } }
+    },
+    /* @__PURE__ */ React14.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
+      ListItemText2,
+      {
+        secondary: title,
+        secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
+        sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
+      }
+    )),
+    /* @__PURE__ */ React14.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React14.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(Stack8, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
+    // TODO: Render actual controls
+    /* @__PURE__ */ React14.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
+  )))));
+}
+
+// src/components/instance-editing-panel/instance-editing-panel.tsx
+function InstanceEditingPanel() {
+  const { element } = useElement();
+  const settings = useElementSetting(element.id, "component_instance");
+  const componentId = (componentInstancePropTypeUtil.extract(settings)?.component_id).value;
+  const component = componentId ? selectComponent(getState5(), componentId) : null;
+  const overridableProps = componentId ? selectOverridableProps(getState5(), componentId) : null;
+  const componentInstanceId = useSelectedElement()?.element?.id ?? null;
+  if (!componentId || !overridableProps || !component) {
+    return null;
+  }
+  const panelTitle = __12("Edit %s", "elementor").replace("%s", component.name);
+  const handleEditComponent = () => switchToComponent(componentId, componentInstanceId);
+  const groups = overridableProps.groups.order.map(
+    (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
+  ).filter(Boolean);
+  const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(PanelHeader, { sx: { justifyContent: "start" } }, /* @__PURE__ */ React15.createElement(Stack9, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(Stack9, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(Tooltip2, { title: panelTitle }, /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(Stack9, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+}
+
+// src/components/overridable-props/overridable-prop-control.tsx
+import * as React17 from "react";
+import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from "@elementor/editor-controls";
+import { createTopLevelObjectType, useElement as useElement2 } from "@elementor/editor-editing-panel";
+import { __getState as getState7 } from "@elementor/store";
+
+// src/prop-types/component-overridable-prop-type.ts
+import { createPropUtils as createPropUtils4 } from "@elementor/editor-props";
+import { z as z5 } from "@elementor/schema";
+var componentOverridablePropTypeUtil = createPropUtils4(
+  "overridable",
+  z5.object({
+    override_key: z5.string(),
+    origin_value: z5.object({
+      $$type: z5.string(),
+      value: z5.unknown()
     }).nullable()
   })
 );
 
 // src/provider/overridable-prop-context.tsx
-import * as React13 from "react";
+import * as React16 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var OverridablePropContext = createContext2(null);
 function OverridablePropProvider({ children, ...props }) {
-  return /* @__PURE__ */ React13.createElement(OverridablePropContext.Provider, { value: props }, children);
+  return /* @__PURE__ */ React16.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
 var useOverridablePropValue = () => useContext2(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
-import { __dispatch as dispatch4, __getState as getState5 } from "@elementor/store";
+import { __dispatch as dispatch4, __getState as getState6 } from "@elementor/store";
 function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps(getState5(), componentId);
+  const overridableProps = selectOverridableProps(getState6(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1715,9 +1848,9 @@ function OverridablePropControl({
   OriginalControl,
   ...props
 }) {
-  const { elementType } = useElement();
+  const { elementType } = useElement2();
   const { value, bind, setValue, placeholder, ...propContext } = useBoundProp(componentOverridablePropTypeUtil);
-  const componentId = selectCurrentComponentId(getState6());
+  const componentId = selectCurrentComponentId(getState7());
   if (!componentId) {
     throw new Error("Component ID is required");
   }
@@ -1738,7 +1871,7 @@ function OverridablePropControl({
     }
   });
   const objectPlaceholder = placeholder ? { [bind]: placeholder } : void 0;
-  return /* @__PURE__ */ React14.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React17.createElement(OverridablePropProvider, { value }, /* @__PURE__ */ React17.createElement(
     PropProvider,
     {
       ...propContext,
@@ -1747,23 +1880,23 @@ function OverridablePropControl({
       value: { [bind]: value.origin_value },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React14.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React14.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React14.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React17.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-import * as React17 from "react";
+import * as React20 from "react";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
-import { useElement as useElement2 } from "@elementor/editor-editing-panel";
+import { useElement as useElement3 } from "@elementor/editor-editing-panel";
 import { getWidgetsCache } from "@elementor/editor-elements";
-import { __getState as getState9 } from "@elementor/store";
-import { bindPopover, bindTrigger as bindTrigger2, Popover as Popover2, Tooltip as Tooltip2, usePopupState as usePopupState2 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __getState as getState10 } from "@elementor/store";
+import { bindPopover, bindTrigger as bindTrigger2, Popover as Popover2, Tooltip as Tooltip3, usePopupState as usePopupState2 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/store/actions/set-overridable-prop.ts
-import { __dispatch as dispatch5, __getState as getState7 } from "@elementor/store";
+import { __dispatch as dispatch5, __getState as getState8 } from "@elementor/store";
 import { generateUniqueId as generateUniqueId2 } from "@elementor/utils";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 function setOverridableProp({
   componentId,
   overrideKey,
@@ -1775,7 +1908,7 @@ function setOverridableProp({
   widgetType,
   originValue
 }) {
-  const overridableProps = selectOverridableProps(getState7(), componentId);
+  const overridableProps = selectOverridableProps(getState8(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1853,7 +1986,7 @@ function addNewGroup(groups, groupId) {
       ...groups.items,
       [currentGroupId]: {
         id: currentGroupId,
-        label: __11("Default", "elementor"),
+        label: __13("Default", "elementor"),
         props: []
       }
     },
@@ -1903,11 +2036,11 @@ function removeProps({
 }
 
 // src/components/overridable-props/indicator.tsx
-import * as React15 from "react";
+import * as React18 from "react";
 import { forwardRef } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
 import { Box as Box8, styled as styled2 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 var SIZE = "tiny";
 var IconContainer = styled2(Box8)`
 	pointer-events: none;
@@ -1963,33 +2096,33 @@ var Content = styled2(Box8)`
 		}
 	}
 `;
-var Indicator = forwardRef(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React15.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React15.createElement(
+var Indicator = forwardRef(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React18.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React18.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? __12("Overridable property", "elementor") : __12("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? __14("Overridable property", "elementor") : __14("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React15.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React15.createElement(PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React18.createElement(CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE })
 )));
 
 // src/components/overridable-props/overridable-prop-form.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 import { useState as useState4 } from "react";
 import { Form as Form2, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { Button as Button3, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack7, TextField as TextField3, Typography as Typography6 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Button as Button4, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack10, TextField as TextField3, Typography as Typography7 } from "@elementor/ui";
+import { __ as __15 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var DEFAULT_GROUP = { value: null, label: __13("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: __15("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue }) {
   const [propLabel, setPropLabel] = useState4(currentValue?.label ?? null);
   const [group, setGroup] = useState4(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = __13("Name", "elementor");
-  const groupName = __13("Group Name", "elementor");
+  const name = __15("Name", "elementor");
+  const groupName = __15("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? __13("Create new property", "elementor") : __13("Update property", "elementor");
-  const ctaLabel = isCreate ? __13("Create", "elementor") : __13("Update", "elementor");
-  return /* @__PURE__ */ React16.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React16.createElement(Stack7, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React16.createElement(
-    Stack7,
+  const title = isCreate ? __15("Create new property", "elementor") : __15("Update property", "elementor");
+  const ctaLabel = isCreate ? __15("Create", "elementor") : __15("Update", "elementor");
+  return /* @__PURE__ */ React19.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(Stack10, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
+    Stack10,
     {
       direction: "row",
       alignItems: "center",
@@ -1997,18 +2130,18 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%", mb: 1.5 }
     },
-    /* @__PURE__ */ React16.createElement(Typography6, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React16.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(FormLabel2, { size: "tiny" }, name)), /* @__PURE__ */ React16.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React19.createElement(Typography7, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(FormLabel2, { size: "tiny" }, name)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
     TextField3,
     {
       name,
       size: SIZE2,
       fullWidth: true,
-      placeholder: __13("Enter value", "elementor"),
+      placeholder: __15("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => setPropLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React16.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(FormLabel2, { size: "tiny" }, groupName)), /* @__PURE__ */ React16.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
+  ))), /* @__PURE__ */ React19.createElement(Grid2, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(FormLabel2, { size: "tiny" }, groupName)), /* @__PURE__ */ React19.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
     Select,
     {
       name: groupName,
@@ -2025,17 +2158,17 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
         return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React16.createElement(MenuListItem2, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React16.createElement(Stack7, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React16.createElement(Button3, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React19.createElement(MenuListItem2, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React19.createElement(Stack10, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(Button4, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-import { __getState as getState8 } from "@elementor/store";
+import { __getState as getState9 } from "@elementor/store";
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps(getState8(), componentId);
+  const overridableProps = selectOverridableProps(getState9(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -2046,18 +2179,18 @@ function getOverridableProp({
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
   const { bind } = useBoundProp2();
-  const componentId = selectCurrentComponentId(getState9());
+  const componentId = selectCurrentComponentId(getState10());
   if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  const overridableProps = selectOverridableProps(getState9(), componentId);
-  return /* @__PURE__ */ React17.createElement(Content2, { componentId, overridableProps });
+  const overridableProps = selectOverridableProps(getState10(), componentId);
+  return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = useElement2();
+  } = useElement3();
   const { value, bind, propType } = useBoundProp2();
   const contextOverridableValue = useOverridablePropValue();
   const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp2(
@@ -2092,7 +2225,7 @@ function Content2({ componentId, overridableProps }) {
     popupState.close();
   };
   const overridableConfig = overridableValue ? getOverridableProp({ componentId, overrideKey: overridableValue.override_key }) : void 0;
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(Tooltip2, { placement: "top", title: __14("Override Property", "elementor") }, /* @__PURE__ */ React17.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip3, { placement: "top", title: __16("Override Property", "elementor") }, /* @__PURE__ */ React20.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React20.createElement(
     Popover2,
     {
       disableScrollLock: true,
@@ -2109,7 +2242,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2132,16 +2265,16 @@ import { getMCPByDomain as getMCPByDomain2 } from "@elementor/editor-mcp";
 // src/mcp/save-as-component-tool.ts
 import { getContainer as getContainer2 } from "@elementor/editor-elements";
 import { getMCPByDomain } from "@elementor/editor-mcp";
-import { z as z3 } from "@elementor/schema";
+import { z as z6 } from "@elementor/schema";
 var InputSchema = {
-  element_id: z3.string().describe(
+  element_id: z6.string().describe(
     'The unique identifier of the element to save as a component. Use the "list-elements" tool to find available element IDs in the current document.'
   ),
-  component_name: z3.string().describe("The name for the new component. Should be descriptive and unique among existing components.")
+  component_name: z6.string().describe("The name for the new component. Should be descriptive and unique among existing components.")
 };
 var OutputSchema = {
-  message: z3.string().optional().describe("Additional information about the operation result"),
-  component_uid: z3.string().optional().describe("The unique identifier of the newly created component (only present on success)")
+  message: z6.string().optional().describe("Additional information about the operation result"),
+  component_uid: z6.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 = {
@@ -2229,7 +2362,7 @@ function removeComponentStyles(id) {
 
 // src/store/components-styles-provider.ts
 import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { __getState as getState10, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
+import { __getState as getState11, __subscribeWithSelector as subscribeWithSelector } from "@elementor/store";
 var componentsStylesProvider = createStylesProvider({
   key: "components-styles",
   priority: 100,
@@ -2241,22 +2374,22 @@ var componentsStylesProvider = createStylesProvider({
   ),
   actions: {
     all: () => {
-      return selectFlatStyles(getState10());
+      return selectFlatStyles(getState11());
     },
     get: (id) => {
-      return selectFlatStyles(getState10()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles(getState11()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
 import { updateElementSettings } from "@elementor/editor-elements";
-import { __dispatch as dispatch8, __getState as getState11 } from "@elementor/store";
+import { __dispatch as dispatch8, __getState as getState12 } from "@elementor/store";
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents(getState11());
+  const unpublishedComponents = selectUnpublishedComponents(getState12());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -2328,7 +2461,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-import { __getState as getState12 } from "@elementor/store";
+import { __getState as getState13 } from "@elementor/store";
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -2336,7 +2469,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps(getState12(), currentDocument.id);
+  const overridableProps = selectOverridableProps(getState13(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -2344,7 +2477,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 import { notify } from "@elementor/editor-notifications";
-import { __getState as getState13 } from "@elementor/store";
+import { __getState as getState14 } from "@elementor/store";
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -2357,7 +2490,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents(getState13());
+    const archivedComponents = selectArchivedComponents(getState14());
     if (!archivedComponents.length) {
       return;
     }
@@ -2423,7 +2556,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   injectTab({
     id: "components",
-    label: __15("Components", "elementor"),
+    label: __17("Components", "elementor"),
     component: Components
   });
   injectIntoTop({
@@ -2459,6 +2592,11 @@ function init() {
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });
+  registerEditingPanelReplacement({
+    id: "component-instance-edit-panel",
+    condition: (_, elementType) => elementType.key === "e-component",
+    component: InstanceEditingPanel
+  });
   settingsTransformersRegistry2.register("component-instance", componentInstanceTransformer);
   settingsTransformersRegistry2.register("overridable", componentOverridableTransformer);
   initMcp();