@elementor/editor-components 3.35.0-341 → 3.35.0-343

package/dist/index.js

@@ -38,12 +38,12 @@ module.exports = __toCommonJS(index_exports);
 var import_editor = require("@elementor/editor");
 var import_editor_canvas6 = require("@elementor/editor-canvas");
 var import_editor_documents10 = require("@elementor/editor-documents");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store48 = require("@elementor/store");
-var import_i18n15 = require("@wordpress/i18n");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_store50 = require("@elementor/store");
+var import_i18n17 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -309,27 +309,31 @@ var import_i18n2 = require("@wordpress/i18n");
 // src/hooks/use-navigate-back.ts
 var import_react = require("react");
 var import_editor_documents2 = require("@elementor/editor-documents");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store5 = require("@elementor/store");
+
+// src/utils/switch-to-component.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+function switchToComponent(componentId, componentInstanceId) {
+  (0, import_editor_v1_adapters2.__privateRunCommand)("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 = (0, import_store5.__useSelector)(selectPath);
   const documentsManager = (0, import_editor_documents2.getV1DocumentsManager)();
   return (0, import_react.useCallback)(() => {
     const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at(-2) ?? {};
-    const switchToDocument = (id, selector) => {
-      (0, import_editor_v1_adapters2.__privateRunCommand)("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]);
 }
 
@@ -517,7 +521,6 @@ var import_editor_documents6 = require("@elementor/editor-documents");
 // src/create-component-type.ts
 var import_editor_canvas3 = require("@elementor/editor-canvas");
 var import_editor_documents5 = require("@elementor/editor-documents");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_i18n4 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
@@ -655,12 +658,7 @@ function createComponentView(options) {
       if (!isAllowedToSwitchDocument) {
         options.showLockedByModal?.(lockedBy || "");
       } else {
-        (0, import_editor_v1_adapters3.__privateRunCommand)("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 }) {
@@ -1112,7 +1110,7 @@ var import_ui7 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 
 // src/store/actions/create-unpublished-component.ts
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store21 = require("@elementor/store");
 var import_utils2 = require("@elementor/utils");
 function createUnpublishedComponent(name, element, eventData) {
@@ -1132,7 +1130,7 @@ function createUnpublishedComponent(name, element, eventData) {
     component_name: name,
     ...eventData
   });
-  (0, import_editor_v1_adapters4.__privateRunCommand)("document/save/auto");
+  (0, import_editor_v1_adapters3.__privateRunCommand)("document/save/auto");
   return uid;
 }
 
@@ -1383,7 +1381,7 @@ var Form = ({
 var React11 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_editor_documents8 = require("@elementor/editor-documents");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store25 = require("@elementor/store");
 
 // src/store/actions/update-current-component.ts
@@ -1409,9 +1407,9 @@ var import_i18n9 = require("@wordpress/i18n");
 
 // src/hooks/use-canvas-document.ts
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function useCanvasDocument() {
-  return (0, import_editor_v1_adapters5.__privateUseListenTo)((0, import_editor_v1_adapters5.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_canvas5.getCanvasIframeDocument)());
+  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
@@ -1596,7 +1594,7 @@ function useHandleDocumentSwitches() {
   const currentComponentId = (0, import_store25.__useSelector)(selectCurrentComponentId);
   const path = (0, import_store25.__useSelector)(selectPath);
   (0, import_react8.useEffect)(() => {
-    return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("editor/documents/attach-preview"), () => {
+    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;
@@ -1660,39 +1658,173 @@ var EditModeDialog = ({ lockedBy }) => {
   )), /* @__PURE__ */ React12.createElement(import_ui8.DialogActions, null, /* @__PURE__ */ React12.createElement(import_ui8.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui4.closeDialog }, (0, import_i18n10.__)("Close", "elementor"))))));
 };
 
-// src/components/overridable-props/overridable-prop-control.tsx
-var React14 = __toESM(require("react"));
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_store29 = require("@elementor/store");
+// src/components/instance-editing-panel/instance-editing-panel.tsx
+var React15 = __toESM(require("react"));
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_elements5 = require("@elementor/editor-elements");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_icons9 = require("@elementor/icons");
+var import_store27 = require("@elementor/store");
+var import_ui11 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
-// src/prop-types/component-overridable-prop-type.ts
+// src/prop-types/component-instance-prop-type.ts
+var import_editor_props3 = require("@elementor/editor-props");
+var import_schema4 = require("@elementor/schema");
+
+// src/prop-types/component-instance-overrides-prop-type.ts
+var import_editor_props2 = require("@elementor/editor-props");
+var import_schema3 = require("@elementor/schema");
+
+// src/prop-types/component-instance-override-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",
+var componentInstanceOverridePropTypeUtil = (0, import_editor_props.createPropUtils)(
+  "override",
   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()
+    override_value: import_schema2.z.unknown(),
+    schema_source: import_schema2.z.object({
+      type: import_schema2.z.literal("component"),
+      id: import_schema2.z.number()
+    })
   })
 );
 
-// src/provider/overridable-prop-context.tsx
+// src/prop-types/component-instance-overrides-prop-type.ts
+var componentInstanceOverridesPropTypeUtil = (0, import_editor_props2.createPropUtils)(
+  "overrides",
+  import_schema3.z.array(componentInstanceOverridePropTypeUtil.schema)
+);
+
+// src/prop-types/component-instance-prop-type.ts
+var componentInstancePropTypeUtil = (0, import_editor_props3.createPropUtils)(
+  "component-instance",
+  import_schema4.z.object({
+    component_id: import_editor_props3.numberPropTypeUtil.schema,
+    overrides: componentInstanceOverridesPropTypeUtil.schema
+  })
+);
+
+// src/components/instance-editing-panel/empty-state.tsx
 var React13 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+var EmptyState2 = ({ onEditComponent }) => {
+  return /* @__PURE__ */ React13.createElement(
+    import_ui9.Stack,
+    {
+      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(import_icons8.ComponentPropListIcon, { fontSize: "large" }),
+    /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n11.__)("No properties yet", "elementor")),
+    /* @__PURE__ */ React13.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, (0, import_i18n11.__)(
+      "Edit the component to add properties, manage them or update the design across all instances.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React13.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React13.createElement(import_icons8.PencilIcon, { fontSize: "small" }), (0, import_i18n11.__)("Edit component", "elementor"))
+  );
+};
+
+// src/components/instance-editing-panel/override-props-group.tsx
+var React14 = __toESM(require("react"));
 var import_react9 = require("react");
-var OverridablePropContext = (0, import_react9.createContext)(null);
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_ui10 = require("@elementor/ui");
+function OverridePropsGroup({ group, props }) {
+  const [isOpen, setIsOpen] = (0, import_editor_editing_panel.useStateByElement)(group.id, true);
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+  const id = (0, import_react9.useId)();
+  const labelId = `label-${id}`;
+  const contentId = `content-${id}`;
+  const title = group.label;
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    import_ui10.ListItemButton,
+    {
+      id: labelId,
+      "aria-controls": contentId,
+      "aria-label": `${title} section`,
+      onClick: handleClick,
+      p: 0,
+      sx: { "&:hover": { backgroundColor: "transparent" } }
+    },
+    /* @__PURE__ */ React14.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
+      import_ui10.ListItemText,
+      {
+        secondary: title,
+        secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
+        sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
+      }
+    )),
+    /* @__PURE__ */ React14.createElement(import_editor_ui5.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+  ), /* @__PURE__ */ React14.createElement(import_ui10.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(import_ui10.Stack, { 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 } = (0, import_editor_editing_panel2.useElement)();
+  const settings = (0, import_editor_elements5.useElementSetting)(element.id, "component_instance");
+  const componentId = (componentInstancePropTypeUtil.extract(settings)?.component_id).value;
+  const component = componentId ? selectComponent((0, import_store27.__getState)(), componentId) : null;
+  const overridableProps = componentId ? selectOverridableProps((0, import_store27.__getState)(), componentId) : null;
+  const componentInstanceId = (0, import_editor_elements5.useSelectedElement)()?.element?.id ?? null;
+  if (!componentId || !overridableProps || !component) {
+    return null;
+  }
+  const panelTitle = (0, import_i18n12.__)("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(import_editor_panels.PanelHeader, { sx: { justifyContent: "start" } }, /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(import_ui11.Stack, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(import_icons9.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(import_ui11.Tooltip, { title: panelTitle }, /* @__PURE__ */ React15.createElement(import_ui11.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(import_icons9.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(import_editor_panels.PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(import_ui11.Stack, { 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
+var React17 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_store31 = require("@elementor/store");
+
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props4 = require("@elementor/editor-props");
+var import_schema5 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props4.createPropUtils)(
+  "overridable",
+  import_schema5.z.object({
+    override_key: import_schema5.z.string(),
+    origin_value: import_schema5.z.object({
+      $$type: import_schema5.z.string(),
+      value: import_schema5.z.unknown()
+    }).nullable()
+  })
+);
+
+// src/provider/overridable-prop-context.tsx
+var React16 = __toESM(require("react"));
+var import_react10 = require("react");
+var OverridablePropContext = (0, import_react10.createContext)(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 = () => (0, import_react9.useContext)(OverridablePropContext)?.value;
+var useOverridablePropValue = () => (0, import_react10.useContext)(OverridablePropContext)?.value;
 
 // src/store/actions/update-overridable-prop-origin-value.ts
-var import_store27 = require("@elementor/store");
+var import_store29 = require("@elementor/store");
 function updateOverridablePropOriginValue(componentId, propValue) {
-  const overridableProps = selectOverridableProps((0, import_store27.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store29.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1710,7 +1842,7 @@ function updateOverridablePropOriginValue(componentId, propValue) {
       }
     }
   };
-  (0, import_store27.__dispatch)(
+  (0, import_store29.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: newOverridableProps
@@ -1723,9 +1855,9 @@ function OverridablePropControl({
   OriginalControl,
   ...props
 }) {
-  const { elementType } = (0, import_editor_editing_panel.useElement)();
+  const { elementType } = (0, import_editor_editing_panel3.useElement)();
   const { value, bind, setValue, placeholder, ...propContext } = (0, import_editor_controls.useBoundProp)(componentOverridablePropTypeUtil);
-  const componentId = selectCurrentComponentId((0, import_store29.__getState)());
+  const componentId = selectCurrentComponentId((0, import_store31.__getState)());
   if (!componentId) {
     throw new Error("Component ID is required");
   }
@@ -1740,13 +1872,13 @@ function OverridablePropControl({
     setValue(propValue);
     updateOverridablePropOriginValue(componentId, propValue);
   };
-  const propType = (0, import_editor_editing_panel.createTopLevelObjectType)({
+  const propType = (0, import_editor_editing_panel3.createTopLevelObjectType)({
     schema: {
       [bind]: elementType.propsSchema[bind]
     }
   });
   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(
     import_editor_controls.PropProvider,
     {
       ...propContext,
@@ -1755,23 +1887,23 @@ function OverridablePropControl({
       value: { [bind]: value.origin_value },
       placeholder: objectPlaceholder
     },
-    /* @__PURE__ */ React14.createElement(import_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ React14.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React14.createElement(OriginalControl, { ...props })))
+    /* @__PURE__ */ React17.createElement(import_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: [] }, /* @__PURE__ */ React17.createElement(OriginalControl, { ...props })))
   ));
 }
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
-var React17 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_controls2 = require("@elementor/editor-controls");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store35 = require("@elementor/store");
-var import_ui11 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
+var import_editor_elements6 = require("@elementor/editor-elements");
+var import_store37 = require("@elementor/store");
+var import_ui14 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/store/actions/set-overridable-prop.ts
-var import_store31 = require("@elementor/store");
+var import_store33 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 function setOverridableProp({
   componentId,
   overrideKey,
@@ -1783,7 +1915,7 @@ function setOverridableProp({
   widgetType,
   originValue
 }) {
-  const overridableProps = selectOverridableProps((0, import_store31.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store33.__getState)(), componentId);
   if (!overridableProps) {
     return;
   }
@@ -1830,7 +1962,7 @@ function setOverridableProp({
       overridableProp
     );
   }
-  (0, import_store31.__dispatch)(
+  (0, import_store33.__dispatch)(
     slice.actions.setOverridableProps({
       componentId,
       overridableProps: {
@@ -1861,7 +1993,7 @@ function addNewGroup(groups, groupId) {
       ...groups.items,
       [currentGroupId]: {
         id: currentGroupId,
-        label: (0, import_i18n11.__)("Default", "elementor"),
+        label: (0, import_i18n13.__)("Default", "elementor"),
         props: []
       }
     },
@@ -1911,13 +2043,13 @@ function removeProps({
 }
 
 // src/components/overridable-props/indicator.tsx
-var React15 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_icons8 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var React18 = __toESM(require("react"));
+var import_react11 = require("react");
+var import_icons10 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 var SIZE = "tiny";
-var IconContainer = (0, import_ui9.styled)(import_ui9.Box)`
+var IconContainer = (0, import_ui12.styled)(import_ui12.Box)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -1934,7 +2066,7 @@ var IconContainer = (0, import_ui9.styled)(import_ui9.Box)`
 		stroke-width: 2px;
 	}
 `;
-var Content = (0, import_ui9.styled)(import_ui9.Box)`
+var Content = (0, import_ui12.styled)(import_ui12.Box)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -1971,33 +2103,33 @@ var Content = (0, import_ui9.styled)(import_ui9.Box)`
 		}
 	}
 `;
-var Indicator = (0, import_react10.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React15.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React15.createElement(
+var Indicator = (0, import_react11.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React18.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React18.createElement(
   IconContainer,
   {
     className: "icon",
-    "aria-label": isOverridable ? (0, import_i18n12.__)("Overridable property", "elementor") : (0, import_i18n12.__)("Make prop overridable", "elementor")
+    "aria-label": isOverridable ? (0, import_i18n14.__)("Overridable property", "elementor") : (0, import_i18n14.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React15.createElement(import_icons8.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React15.createElement(import_icons8.PlusIcon, { fontSize: SIZE })
+  isOverridable ? /* @__PURE__ */ React18.createElement(import_icons10.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(import_icons10.PlusIcon, { fontSize: SIZE })
 )));
 
 // src/components/overridable-props/overridable-prop-form.tsx
-var React16 = __toESM(require("react"));
-var import_react11 = require("react");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_ui10 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var React19 = __toESM(require("react"));
+var import_react12 = require("react");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_ui13 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 var SIZE2 = "tiny";
-var DEFAULT_GROUP = { value: null, label: (0, import_i18n13.__)("Default", "elementor") };
+var DEFAULT_GROUP = { value: null, label: (0, import_i18n15.__)("Default", "elementor") };
 function OverridablePropForm({ onSubmit, groups, currentValue }) {
-  const [propLabel, setPropLabel] = (0, import_react11.useState)(currentValue?.label ?? null);
-  const [group, setGroup] = (0, import_react11.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
-  const name = (0, import_i18n13.__)("Name", "elementor");
-  const groupName = (0, import_i18n13.__)("Group Name", "elementor");
+  const [propLabel, setPropLabel] = (0, import_react12.useState)(currentValue?.label ?? null);
+  const [group, setGroup] = (0, import_react12.useState)(currentValue?.groupId ?? groups?.[0]?.value ?? null);
+  const name = (0, import_i18n15.__)("Name", "elementor");
+  const groupName = (0, import_i18n15.__)("Group Name", "elementor");
   const isCreate = currentValue === void 0;
-  const title = isCreate ? (0, import_i18n13.__)("Create new property", "elementor") : (0, import_i18n13.__)("Update property", "elementor");
-  const ctaLabel = isCreate ? (0, import_i18n13.__)("Create", "elementor") : (0, import_i18n13.__)("Update", "elementor");
-  return /* @__PURE__ */ React16.createElement(import_editor_ui5.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React16.createElement(import_ui10.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React16.createElement(
-    import_ui10.Stack,
+  const title = isCreate ? (0, import_i18n15.__)("Create new property", "elementor") : (0, import_i18n15.__)("Update property", "elementor");
+  const ctaLabel = isCreate ? (0, import_i18n15.__)("Create", "elementor") : (0, import_i18n15.__)("Update", "elementor");
+  return /* @__PURE__ */ React19.createElement(import_editor_ui6.Form, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(import_ui13.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
+    import_ui13.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -2005,19 +2137,19 @@ 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(import_ui10.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
-  ), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui10.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
-    import_ui10.TextField,
+    /* @__PURE__ */ React19.createElement(import_ui13.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, title)
+  ), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui13.FormLabel, { size: "tiny" }, name)), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
+    import_ui13.TextField,
     {
       name,
       size: SIZE2,
       fullWidth: true,
-      placeholder: (0, import_i18n13.__)("Enter value", "elementor"),
+      placeholder: (0, import_i18n15.__)("Enter value", "elementor"),
       value: propLabel ?? "",
       onChange: (e) => setPropLabel(e.target.value)
     }
-  ))), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(import_ui10.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React16.createElement(import_ui10.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React16.createElement(
-    import_ui10.Select,
+  ))), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { container: true, gap: 0.75, alignItems: "start", px: 1.5, mb: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui13.FormLabel, { size: "tiny" }, groupName)), /* @__PURE__ */ React19.createElement(import_ui13.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(
+    import_ui13.Select,
     {
       name: groupName,
       size: SIZE2,
@@ -2033,17 +2165,17 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
         return groups?.find(({ value }) => value === selectedValue)?.label ?? selectedValue;
       }
     },
-    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React16.createElement(import_editor_ui5.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React16.createElement(import_ui10.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React16.createElement(import_ui10.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+    (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React19.createElement(import_editor_ui6.MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
+  ))), /* @__PURE__ */ React19.createElement(import_ui13.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui13.Button, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts
-var import_store33 = require("@elementor/store");
+var import_store35 = require("@elementor/store");
 function getOverridableProp({
   componentId,
   overrideKey
 }) {
-  const overridableProps = selectOverridableProps((0, import_store33.__getState)(), componentId);
+  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
   if (!overridableProps) {
     return void 0;
   }
@@ -2054,30 +2186,30 @@ function getOverridableProp({
 var FORBIDDEN_KEYS = ["_cssid", "attributes"];
 function OverridablePropIndicator() {
   const { bind } = (0, import_editor_controls2.useBoundProp)();
-  const componentId = selectCurrentComponentId((0, import_store35.__getState)());
+  const componentId = selectCurrentComponentId((0, import_store37.__getState)());
   if (!isPropAllowed(bind) || !componentId) {
     return null;
   }
-  const overridableProps = selectOverridableProps((0, import_store35.__getState)(), componentId);
-  return /* @__PURE__ */ React17.createElement(Content2, { componentId, overridableProps });
+  const overridableProps = selectOverridableProps((0, import_store37.__getState)(), componentId);
+  return /* @__PURE__ */ React20.createElement(Content2, { componentId, overridableProps });
 }
 function Content2({ componentId, overridableProps }) {
   const {
     element: { id: elementId },
     elementType
-  } = (0, import_editor_editing_panel2.useElement)();
+  } = (0, import_editor_editing_panel4.useElement)();
   const { value, bind, propType } = (0, import_editor_controls2.useBoundProp)();
   const contextOverridableValue = useOverridablePropValue();
   const { value: boundPropOverridableValue, setValue: setOverridableValue } = (0, import_editor_controls2.useBoundProp)(
     componentOverridablePropTypeUtil
   );
   const overridableValue = boundPropOverridableValue ?? contextOverridableValue;
-  const popupState = (0, import_ui11.usePopupState)({
+  const popupState = (0, import_ui14.usePopupState)({
     variant: "popover"
   });
-  const triggerProps = (0, import_ui11.bindTrigger)(popupState);
-  const popoverProps = (0, import_ui11.bindPopover)(popupState);
-  const { elType } = (0, import_editor_elements5.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
+  const triggerProps = (0, import_ui14.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui14.bindPopover)(popupState);
+  const { elType } = (0, import_editor_elements6.getWidgetsCache)()?.[elementType.key] ?? { elType: "widget" };
   const handleSubmit = ({ label, group }) => {
     const originValue = !overridableValue ? value ?? propType.default : overridableValue?.origin_value ?? {};
     const overridablePropConfig = setOverridableProp({
@@ -2100,8 +2232,8 @@ 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(import_ui11.Tooltip, { placement: "top", title: (0, import_i18n14.__)("Override Property", "elementor") }, /* @__PURE__ */ React17.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React17.createElement(
-    import_ui11.Popover,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui14.Tooltip, { placement: "top", title: (0, import_i18n16.__)("Override Property", "elementor") }, /* @__PURE__ */ React20.createElement(Indicator, { ...triggerProps, isOpen: !!popoverProps.open, isOverridable: !!overridableValue })), /* @__PURE__ */ React20.createElement(
+    import_ui14.Popover,
     {
       disableScrollLock: true,
       anchorOrigin: {
@@ -2117,7 +2249,7 @@ function Content2({ componentId, overridableProps }) {
       },
       ...popoverProps
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React20.createElement(
       OverridablePropForm,
       {
         onSubmit: handleSubmit,
@@ -2138,18 +2270,18 @@ function isPropAllowed(bind) {
 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_elements7 = require("@elementor/editor-elements");
 var import_editor_mcp = require("@elementor/editor-mcp");
-var import_schema3 = require("@elementor/schema");
+var import_schema6 = require("@elementor/schema");
 var InputSchema = {
-  element_id: import_schema3.z.string().describe(
+  element_id: import_schema6.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.")
+  component_name: import_schema6.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)")
+  message: import_schema6.z.string().optional().describe("Additional information about the operation result"),
+  component_uid: import_schema6.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 = {
@@ -2159,7 +2291,7 @@ var ERROR_MESSAGES = {
 };
 var handleSaveAsComponent = async (params) => {
   const { element_id: elementId, component_name: componentName } = params;
-  const container = (0, import_editor_elements6.getContainer)(elementId);
+  const container = (0, import_editor_elements7.getContainer)(elementId);
   if (!container) {
     throw new Error(ERROR_MESSAGES.ELEMENT_NOT_FOUND);
   }
@@ -2219,29 +2351,29 @@ function initMcp() {
 }
 
 // src/populate-store.ts
-var import_react12 = require("react");
-var import_store37 = require("@elementor/store");
+var import_react13 = require("react");
+var import_store39 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react12.useEffect)(() => {
-    (0, import_store37.__dispatch)(loadComponents());
+  (0, import_react13.useEffect)(() => {
+    (0, import_store39.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/actions/remove-component-styles.ts
-var import_store38 = require("@elementor/store");
+var import_store40 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store38.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store40.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store40 = require("@elementor/store");
+var import_store42 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store40.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store42.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -2249,29 +2381,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store40.__getState)());
+      return selectFlatStyles((0, import_store42.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store40.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store42.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/sync/create-components-before-save.ts
-var import_editor_elements7 = require("@elementor/editor-elements");
-var import_store42 = require("@elementor/store");
+var import_editor_elements8 = require("@elementor/editor-elements");
+var import_store44 = require("@elementor/store");
 async function createComponentsBeforeSave({
   elements,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store42.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store44.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
   try {
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store42.__dispatch)(
+    (0, import_store44.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -2280,7 +2412,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store42.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store44.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -2321,7 +2453,7 @@ function shouldUpdateElement(element, uidToComponentId) {
   return { shouldUpdate: false, newComponentId: null };
 }
 function updateElementComponentId(elementId, componentId) {
-  (0, import_editor_elements7.updateElementSettings)({
+  (0, import_editor_elements8.updateElementSettings)({
     id: elementId,
     props: {
       component_instance: {
@@ -2336,7 +2468,7 @@ function updateElementComponentId(elementId, componentId) {
 }
 
 // src/sync/set-component-overridable-props-settings-before-save.ts
-var import_store44 = require("@elementor/store");
+var import_store46 = require("@elementor/store");
 var setComponentOverridablePropsSettingsBeforeSave = ({
   container
 }) => {
@@ -2344,7 +2476,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
   if (!currentDocument || currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE) {
     return;
   }
-  const overridableProps = selectOverridableProps((0, import_store44.__getState)(), currentDocument.id);
+  const overridableProps = selectOverridableProps((0, import_store46.__getState)(), currentDocument.id);
   if (overridableProps) {
     container.settings.set("overridable_props", overridableProps);
   }
@@ -2352,7 +2484,7 @@ var setComponentOverridablePropsSettingsBeforeSave = ({
 
 // src/sync/update-archived-component-before-save.ts
 var import_editor_notifications = require("@elementor/editor-notifications");
-var import_store46 = require("@elementor/store");
+var import_store48 = require("@elementor/store");
 var failedNotification = (message) => ({
   type: "error",
   message: `Failed to archive components: ${message}`,
@@ -2365,7 +2497,7 @@ var successNotification = (message) => ({
 });
 var updateArchivedComponentBeforeSave = async () => {
   try {
-    const archivedComponents = selectArchivedComponents((0, import_store46.__getState)());
+    const archivedComponents = selectArchivedComponents((0, import_store48.__getState)());
     if (!archivedComponents.length) {
       return;
     }
@@ -2415,23 +2547,23 @@ var beforeSave = ({ container, status }) => {
 // src/init.ts
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store48.__registerSlice)(slice);
+  (0, import_store50.__registerSlice)(slice);
   (0, import_editor_canvas6.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
-  (0, import_editor_v1_adapters7.registerDataHook)("dependency", "editor/documents/close", (args) => {
+  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
     const document = (0, import_editor_documents10.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE) {
       args.mode = "autosave";
     }
     return true;
   });
-  (0, import_editor_v1_adapters7.registerDataHook)("after", "preview/drop", onElementDrop);
+  (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_i18n15.__)("Components", "elementor"),
+    label: (0, import_i18n17.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -2446,27 +2578,32 @@ function init() {
     id: "edit-component",
     component: EditComponent
   });
-  (0, import_editor_editing_panel3.injectIntoPanelHeaderTop)({
+  (0, import_editor_editing_panel5.injectIntoPanelHeaderTop)({
     id: "component-panel-header",
     component: ComponentPanelHeader
   });
-  (0, import_editor_v1_adapters7.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "editor/documents/attach-preview", async () => {
     const { id, config } = (0, import_editor_documents10.getV1CurrentDocument)();
     if (id) {
       removeComponentStyles(id);
     }
     await loadComponentsAssets(config?.elements ?? []);
   });
-  (0, import_editor_editing_panel3.registerFieldIndicator)({
-    fieldType: import_editor_editing_panel3.FIELD_TYPE.SETTINGS,
+  (0, import_editor_editing_panel5.registerFieldIndicator)({
+    fieldType: import_editor_editing_panel5.FIELD_TYPE.SETTINGS,
     id: "component-overridable-prop",
     priority: 1,
     indicator: OverridablePropIndicator
   });
-  (0, import_editor_editing_panel3.registerControlReplacement)({
+  (0, import_editor_editing_panel5.registerControlReplacement)({
     component: OverridablePropControl,
     condition: ({ value }) => componentOverridablePropTypeUtil.isValid(value)
   });
+  (0, import_editor_editing_panel5.registerEditingPanelReplacement)({
+    id: "component-instance-edit-panel",
+    condition: (_, elementType) => elementType.key === "e-component",
+    component: InstanceEditingPanel
+  });
   import_editor_canvas6.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
   import_editor_canvas6.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
   initMcp();