@elementor/editor-editing-panel 3.33.0-187 → 3.33.0-189

package/dist/index.js

@@ -4716,30 +4716,148 @@ var controlActionsMenu = (0, import_menus.createMenu)({
 });
 
 // src/controls-registry/controls-registry.tsx
-var import_editor_controls52 = require("@elementor/editor-controls");
-var import_editor_props17 = require("@elementor/editor-props");
+var import_editor_controls50 = require("@elementor/editor-controls");
+var import_editor_props13 = require("@elementor/editor-props");
+var controlTypes = {
+  image: { component: import_editor_controls50.ImageControl, layout: "full", propTypeUtil: import_editor_props13.imagePropTypeUtil },
+  "svg-media": { component: import_editor_controls50.SvgMediaControl, layout: "full", propTypeUtil: import_editor_props13.imageSrcPropTypeUtil },
+  text: { component: import_editor_controls50.TextControl, layout: "full", propTypeUtil: import_editor_props13.stringPropTypeUtil },
+  textarea: { component: import_editor_controls50.TextAreaControl, layout: "full", propTypeUtil: import_editor_props13.stringPropTypeUtil },
+  size: { component: import_editor_controls50.SizeControl, layout: "two-columns", propTypeUtil: import_editor_props13.sizePropTypeUtil },
+  select: { component: import_editor_controls50.SelectControlWrapper, layout: "two-columns", propTypeUtil: import_editor_props13.stringPropTypeUtil },
+  link: { component: import_editor_controls50.LinkControl, layout: "custom", propTypeUtil: import_editor_props13.linkPropTypeUtil },
+  query: { component: import_editor_controls50.QueryControl, layout: "full", propTypeUtil: import_editor_props13.queryPropTypeUtil },
+  url: { component: import_editor_controls50.UrlControl, layout: "full", propTypeUtil: import_editor_props13.stringPropTypeUtil },
+  switch: { component: import_editor_controls50.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props13.booleanPropTypeUtil },
+  number: { component: import_editor_controls50.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props13.numberPropTypeUtil },
+  repeatable: { component: import_editor_controls50.RepeatableControl, layout: "full", propTypeUtil: void 0 },
+  "key-value": { component: import_editor_controls50.KeyValueControl, layout: "full", propTypeUtil: import_editor_props13.keyValuePropTypeUtil },
+  "html-tag": { component: import_editor_controls50.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props13.stringPropTypeUtil },
+  toggle: { component: import_editor_controls50.ToggleControl, layout: "full", propTypeUtil: import_editor_props13.stringPropTypeUtil }
+};
+var ControlsRegistry = class {
+  constructor(controlsRegistry2) {
+    this.controlsRegistry = controlsRegistry2;
+    this.controlsRegistry = controlsRegistry2;
+  }
+  get(type) {
+    return this.controlsRegistry[type]?.component;
+  }
+  getLayout(type) {
+    return this.controlsRegistry[type]?.layout;
+  }
+  getPropTypeUtil(type) {
+    return this.controlsRegistry[type]?.propTypeUtil;
+  }
+  registry() {
+    return this.controlsRegistry;
+  }
+  register(type, component, layout, propTypeUtil) {
+    if (this.controlsRegistry[type]) {
+      throw new ControlTypeAlreadyRegisteredError({ context: { controlType: type } });
+    }
+    this.controlsRegistry[type] = { component, layout, propTypeUtil };
+  }
+  unregister(type) {
+    if (!this.controlsRegistry[type]) {
+      throw new ControlTypeNotRegisteredError({ context: { controlType: type } });
+    }
+    delete this.controlsRegistry[type];
+  }
+};
+var controlsRegistry = new ControlsRegistry(controlTypes);
 
-// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
-var React85 = __toESM(require("react"));
-var import_editor_controls51 = require("@elementor/editor-controls");
-var import_editor_elements15 = require("@elementor/editor-elements");
-var import_editor_props16 = require("@elementor/editor-props");
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_panels3 = require("@elementor/editor-panels");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+
+// src/hooks/use-open-editor-panel.ts
+var import_react39 = require("react");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+
+// src/panel.ts
+var import_editor_panels2 = require("@elementor/editor-panels");
+
+// src/components/editing-panel.tsx
+var React90 = __toESM(require("react"));
+var import_editor_controls53 = require("@elementor/editor-controls");
+var import_editor_elements13 = require("@elementor/editor-elements");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
-var import_ui41 = require("@elementor/ui");
+var import_session8 = require("@elementor/session");
+var import_ui45 = require("@elementor/ui");
 var import_i18n62 = require("@wordpress/i18n");
 
-// src/controls-registry/settings-field.tsx
+// src/components/editing-panel-error-fallback.tsx
 var React84 = __toESM(require("react"));
+var import_ui41 = require("@elementor/ui");
+function EditorPanelErrorFallback() {
+  return /* @__PURE__ */ React84.createElement(import_ui41.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React84.createElement(import_ui41.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React84.createElement("strong", null, "Something went wrong")));
+}
+
+// src/components/editing-panel-tabs.tsx
+var React89 = __toESM(require("react"));
+var import_react38 = require("react");
+var import_ui44 = require("@elementor/ui");
+var import_i18n61 = require("@wordpress/i18n");
+
+// src/components/settings-tab.tsx
+var React88 = __toESM(require("react"));
+var import_editor_controls52 = require("@elementor/editor-controls");
+var import_session7 = require("@elementor/session");
+var import_ui43 = require("@elementor/ui");
+
+// src/controls-registry/control.tsx
+var React85 = __toESM(require("react"));
+var Control = ({ props, type }) => {
+  const ControlByType = controlsRegistry.get(type);
+  const { element } = useElement();
+  if (!ControlByType) {
+    throw new ControlTypeNotFoundError({
+      context: { controlType: type }
+    });
+  }
+  return /* @__PURE__ */ React85.createElement(ControlByType, { ...props, context: { elementId: element.id } });
+};
+
+// src/controls-registry/control-type-container.tsx
+var React86 = __toESM(require("react"));
+var import_ui42 = require("@elementor/ui");
+var ControlTypeContainer = ({ children, layout }) => {
+  if (layout === "custom") {
+    return children;
+  }
+  return /* @__PURE__ */ React86.createElement(StyledContainer, { layout }, children);
+};
+var StyledContainer = (0, import_ui42.styled)(import_ui42.Box, {
+  shouldForwardProp: (prop) => !["layout"].includes(prop)
+})(({ layout, theme }) => ({
+  display: "grid",
+  gridGap: theme.spacing(1),
+  ...getGridLayout(layout)
+}));
+var getGridLayout = (layout) => ({
+  justifyContent: "space-between",
+  gridTemplateColumns: {
+    full: "minmax(0, 1fr)",
+    "two-columns": "repeat(2, minmax(0, 1fr))"
+  }[layout]
+});
+
+// src/controls-registry/settings-field.tsx
+var React87 = __toESM(require("react"));
 var import_react37 = require("react");
-var import_editor_controls50 = require("@elementor/editor-controls");
+var import_editor_controls51 = require("@elementor/editor-controls");
 var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_elements12 = require("@elementor/editor-elements");
-var import_editor_props14 = require("@elementor/editor-props");
+var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_i18n60 = require("@wordpress/i18n");
 
 // src/utils/prop-dependency-utils.ts
-var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_props14 = require("@elementor/editor-props");
 var import_session6 = require("@elementor/session");
 function extractOrderedDependencies(bind, propsSchema, elementValues, dependenciesPerTargetMapping) {
   const prop = getPropType(propsSchema, elementValues, bind.split("."));
@@ -4788,8 +4906,8 @@ function getUpdatedValues(values, dependencies, propsSchema, elementValues, elem
         return newValues;
       }
       const testDependencies = {
-        previousValues: (0, import_editor_props13.isDependencyMet)(propType.dependencies, elementValues),
-        newValues: (0, import_editor_props13.isDependencyMet)(propType.dependencies, combinedValues)
+        previousValues: (0, import_editor_props14.isDependencyMet)(propType.dependencies, elementValues),
+        newValues: (0, import_editor_props14.isDependencyMet)(propType.dependencies, combinedValues)
       };
       if (!testDependencies.newValues.isMet) {
         const newValue = handleUnmetCondition({
@@ -4839,7 +4957,7 @@ function evaluatePropType(props) {
   const { key, index, path, elementValues, basePropKey } = props;
   switch (prop.kind) {
     case "union":
-      const value = (0, import_editor_props13.extractValue)(path.slice(0, index + 1), elementValues);
+      const value = (0, import_editor_props14.extractValue)(path.slice(0, index + 1), elementValues);
       const type = value?.$$type ?? null;
       return getPropType(
         { [basePropKey]: prop.prop_types?.[type] },
@@ -4871,7 +4989,7 @@ function updateValue(path, value, values) {
 function handleUnmetCondition(props) {
   const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
   const newValue = failingDependencies.find((term) => term.newValue)?.newValue ?? null;
-  const currentValue = (0, import_editor_props13.extractValue)(dependency.split("."), elementValues) ?? defaultValue;
+  const currentValue = (0, import_editor_props14.extractValue)(dependency.split("."), elementValues) ?? defaultValue;
   savePreviousValueToStorage({
     path: dependency,
     elementId,
@@ -4923,8 +5041,8 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
     const settings = getUpdatedValues(newValue, dependents, propsSchema, elementSettingValues, elementId);
     undoableUpdateElementProp(settings);
   };
-  const isDisabled = (prop) => !(0, import_editor_props14.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
-  return /* @__PURE__ */ React84.createElement(import_editor_controls50.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React84.createElement(import_editor_controls50.PropKeyProvider, { bind }, children));
+  const isDisabled = (prop) => !(0, import_editor_props15.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
+  return /* @__PURE__ */ React87.createElement(import_editor_controls51.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React87.createElement(import_editor_controls51.PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
   elementId,
@@ -4953,119 +5071,282 @@ function useUndoableUpdateElementProp({
   }, [elementId, propDisplayName]);
 }
 
-// src/controls-registry/element-controls/get-element-by-type.ts
-var import_editor_elements13 = require("@elementor/editor-elements");
-var getElementByType = (elementId, type) => {
-  const currentElement = (0, import_editor_elements13.getContainer)(elementId);
-  if (!currentElement) {
-    throw new Error(`Current element not found, elementId: ${elementId}`);
+// src/components/settings-tab.tsx
+var SettingsTab = () => {
+  const { elementType, element } = useElement();
+  const settingsDefault = useDefaultPanelSettings();
+  const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
+  return /* @__PURE__ */ React88.createElement(import_session7.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React88.createElement(SectionsList, null, elementType.controls.map((control, index) => {
+    if (isControl(control)) {
+      return /* @__PURE__ */ React88.createElement(Control2, { key: getKey(control, element), control });
+    }
+    const { type, value } = control;
+    if (type === "section") {
+      return /* @__PURE__ */ React88.createElement(
+        Section,
+        {
+          title: value.label,
+          key: type + "." + index,
+          defaultExpanded: isDefaultExpanded(value.label)
+        },
+        value.items?.map((item) => {
+          if (isControl(item)) {
+            return /* @__PURE__ */ React88.createElement(Control2, { key: getKey(item, element), control: item });
+          }
+          return null;
+        })
+      );
+    }
+    return null;
+  })));
+};
+var Control2 = ({ control: { value, type } }) => {
+  if (!controlsRegistry.get(value.type)) {
+    return null;
   }
-  if (currentElement.model.get("elType") === type) {
-    return currentElement;
+  const layout = value.meta?.layout || controlsRegistry.getLayout(value.type);
+  const controlProps = populateChildControlProps(value.props);
+  if (layout === "custom") {
+    controlProps.label = value.label;
   }
-  const element = currentElement.children?.findRecursive?.((child) => child.model.get("elType") === type);
-  if (!element) {
-    throw new Error(`Child element ${type} not found`);
+  if (type === "element-control") {
+    return /* @__PURE__ */ React88.createElement(ControlLayout, { control: value, layout, controlProps });
   }
-  return element;
-};
-
-// src/controls-registry/element-controls/tabs-control/actions.ts
-var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_props15 = require("@elementor/editor-props");
-var import_i18n61 = require("@wordpress/i18n");
-var TAB_ELEMENT_TYPE = "e-tab";
-var TAB_PANEL_ELEMENT_TYPE = "e-tab-panel";
-var duplicateItem = ({ items: items3 }) => {
-  items3.forEach(({ item }) => {
-    const tabId = item.id;
-    const { value: tabPanelId } = (0, import_editor_elements14.getElementSetting)(tabId, "tab-panel-id") ?? {};
-    if (!tabPanelId) {
-      throw new Error("Original panel ID is required for duplication");
-    }
-    (0, import_editor_elements14.duplicateElements)({
-      elementIds: [tabId, tabPanelId],
-      title: (0, import_i18n61.__)("Duplicate Tab", "elementor"),
-      onCreate: (duplicatedElements) => {
-        const tab = duplicatedElements.find((element) => element.originalElementId === tabId);
-        const tabPanel = duplicatedElements.find((element) => element.originalElementId === tabPanelId);
-        if (tabPanel && tab) {
-          (0, import_editor_elements14.updateElementSettings)({
-            withHistory: false,
-            id: tab.id,
-            props: {
-              "tab-panel-id": import_editor_props15.stringPropTypeUtil.create(tabPanel.id)
-            }
-          });
-          (0, import_editor_elements14.updateElementSettings)({
-            withHistory: false,
-            id: tabPanel.id,
-            props: {
-              "tab-id": import_editor_props15.stringPropTypeUtil.create(tab.id)
-            }
-          });
-        }
-      }
-    });
-  });
+  return /* @__PURE__ */ React88.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React88.createElement(ControlLayout, { control: value, layout, controlProps }));
 };
-var moveItem = ({
-  toIndex,
-  tabListId,
-  tabContentId,
-  movedElementId
+var ControlLayout = ({
+  control,
+  layout,
+  controlProps
 }) => {
-  const { value: tabPanelId } = (0, import_editor_elements14.getElementSetting)(movedElementId, "tab-panel-id") ?? {};
-  if (!tabPanelId) {
-    throw new Error("Required tab elements not found for reordering");
-  }
-  (0, import_editor_elements14.moveElements)({
-    title: (0, import_i18n61.__)("Reorder Tabs", "elementor"),
-    moves: [
-      {
-        elementId: movedElementId,
-        targetContainerId: tabListId,
-        options: { at: toIndex }
-      },
-      {
-        elementId: tabPanelId,
-        targetContainerId: tabContentId,
-        options: { at: toIndex }
-      }
-    ]
-  });
+  return /* @__PURE__ */ React88.createElement(React88.Fragment, null, control.meta?.topDivider && /* @__PURE__ */ React88.createElement(import_ui43.Divider, null), /* @__PURE__ */ React88.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React88.createElement(import_editor_controls52.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React88.createElement(Control, { type: control.type, props: controlProps })));
 };
-var removeItem = ({ items: items3 }) => {
-  (0, import_editor_elements14.removeElements)({
-    title: (0, import_i18n61.__)("Tabs", "elementor"),
-    elementIds: items3.flatMap(({ item }) => {
-      const tabId = item.id;
-      const { value: panelId } = (0, import_editor_elements14.getElementSetting)(tabId, "tab-panel-id") ?? {};
-      if (!panelId) {
-        throw new Error("Pane ID is required");
+function populateChildControlProps(props) {
+  if (props.childControlType) {
+    const childComponent = controlsRegistry.get(props.childControlType);
+    const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType);
+    props = {
+      ...props,
+      childControlConfig: {
+        component: childComponent,
+        props: props.childControlProps || {},
+        propTypeUtil: childPropType
       }
-      return [tabId, panelId];
-    })
-  });
-};
-var addItem = ({
-  tabContentId,
-  tabListId,
-  items: items3
-}) => {
-  items3.forEach(({ item, index }) => {
-    const newTabPanelId = (0, import_editor_elements14.generateElementId)();
-    const newTabId = (0, import_editor_elements14.generateElementId)();
-    (0, import_editor_elements14.createElements)({
-      title: (0, import_i18n61.__)("Tabs", "elementor"),
-      elements: [
-        {
-          containerId: tabContentId,
-          model: {
-            id: newTabPanelId,
-            elType: TAB_PANEL_ELEMENT_TYPE,
+    };
+  }
+  return props;
+}
+function getKey(control, element) {
+  if (control.type === "control") {
+    return control.value.bind + "." + element.id;
+  }
+  return control.value.type + "." + element.id;
+}
+function isControl(control) {
+  return control.type === "control" || control.type === "element-control";
+}
+
+// src/components/editing-panel-tabs.tsx
+var EditingPanelTabs = () => {
+  const { element } = useElement();
+  return (
+    // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
+    // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
+    /* @__PURE__ */ React89.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React89.createElement(PanelTabContent, null))
+  );
+};
+var PanelTabContent = () => {
+  const editorDefaults = useDefaultPanelSettings();
+  const defaultComponentTab = editorDefaults.defaultTab;
+  const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
+  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui44.useTabs)(currentTab);
+  return /* @__PURE__ */ React89.createElement(ScrollProvider, null, /* @__PURE__ */ React89.createElement(import_ui44.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React89.createElement(import_ui44.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React89.createElement(
+    import_ui44.Tabs,
+    {
+      variant: "fullWidth",
+      size: "small",
+      sx: { mt: 0.5 },
+      ...getTabsProps(),
+      onChange: (_, newValue) => {
+        getTabsProps().onChange(_, newValue);
+        setCurrentTab(newValue);
+      }
+    },
+    /* @__PURE__ */ React89.createElement(import_ui44.Tab, { label: (0, import_i18n61.__)("General", "elementor"), ...getTabProps("settings") }),
+    /* @__PURE__ */ React89.createElement(import_ui44.Tab, { label: (0, import_i18n61.__)("Style", "elementor"), ...getTabProps("style") })
+  ), /* @__PURE__ */ React89.createElement(import_ui44.Divider, null)), /* @__PURE__ */ React89.createElement(import_ui44.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React89.createElement(SettingsTab, null)), /* @__PURE__ */ React89.createElement(import_ui44.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React89.createElement(StyleTab, null))));
+};
+
+// src/components/editing-panel.tsx
+var { useMenuItems } = controlActionsMenu;
+var EditingPanel = () => {
+  const { element, elementType } = (0, import_editor_elements13.useSelectedElement)();
+  const controlReplacements = getControlReplacements();
+  const menuItems = useMenuItems().default;
+  if (!element || !elementType) {
+    return null;
+  }
+  const panelTitle = (0, import_i18n62.__)("Edit %s", "elementor").replace("%s", elementType.title);
+  return /* @__PURE__ */ React90.createElement(import_ui45.ErrorBoundary, { fallback: /* @__PURE__ */ React90.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React90.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React90.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React90.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React90.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React90.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React90.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React90.createElement(EditingPanelTabs, null)))))))));
+};
+
+// src/panel.ts
+var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__createPanel)({
+  id: "editing-panel",
+  component: EditingPanel
+});
+
+// src/sync/is-atomic-widget-selected.ts
+var import_editor_elements14 = require("@elementor/editor-elements");
+var isAtomicWidgetSelected = () => {
+  const selectedElements = (0, import_editor_elements14.getSelectedElements)();
+  const widgetCache = (0, import_editor_elements14.getWidgetsCache)();
+  if (selectedElements.length !== 1) {
+    return false;
+  }
+  return !!widgetCache?.[selectedElements[0].type]?.atomic_controls;
+};
+
+// src/hooks/use-open-editor-panel.ts
+var useOpenEditorPanel = () => {
+  const { open } = usePanelActions();
+  (0, import_react39.useEffect)(() => {
+    return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("panel/editor/open"), () => {
+      if (isAtomicWidgetSelected()) {
+        open();
+      }
+    });
+  }, []);
+};
+
+// src/components/editing-panel-hooks.tsx
+var EditingPanelHooks = () => {
+  useOpenEditorPanel();
+  return null;
+};
+
+// src/controls-registry/element-controls/tabs-control/tabs-control.tsx
+var React91 = __toESM(require("react"));
+var import_editor_controls54 = require("@elementor/editor-controls");
+var import_editor_elements17 = require("@elementor/editor-elements");
+var import_editor_props17 = require("@elementor/editor-props");
+var import_icons25 = require("@elementor/icons");
+var import_ui46 = require("@elementor/ui");
+var import_i18n64 = require("@wordpress/i18n");
+
+// src/controls-registry/element-controls/get-element-by-type.ts
+var import_editor_elements15 = require("@elementor/editor-elements");
+var getElementByType = (elementId, type) => {
+  const currentElement = (0, import_editor_elements15.getContainer)(elementId);
+  if (!currentElement) {
+    throw new Error(`Current element not found, elementId: ${elementId}`);
+  }
+  if (currentElement.model.get("elType") === type) {
+    return currentElement;
+  }
+  const element = currentElement.children?.findRecursive?.((child) => child.model.get("elType") === type);
+  if (!element) {
+    throw new Error(`Child element ${type} not found`);
+  }
+  return element;
+};
+
+// src/controls-registry/element-controls/tabs-control/actions.ts
+var import_editor_elements16 = require("@elementor/editor-elements");
+var import_editor_props16 = require("@elementor/editor-props");
+var import_i18n63 = require("@wordpress/i18n");
+var TAB_ELEMENT_TYPE = "e-tab";
+var TAB_PANEL_ELEMENT_TYPE = "e-tab-panel";
+var duplicateItem = ({ items: items3 }) => {
+  items3.forEach(({ item }) => {
+    const tabId = item.id;
+    const { value: tabPanelId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-panel-id") ?? {};
+    if (!tabPanelId) {
+      throw new Error("Original panel ID is required for duplication");
+    }
+    (0, import_editor_elements16.duplicateElements)({
+      elementIds: [tabId, tabPanelId],
+      title: (0, import_i18n63.__)("Duplicate Tab", "elementor"),
+      onCreate: (duplicatedElements) => {
+        const tab = duplicatedElements.find((element) => element.originalElementId === tabId);
+        const tabPanel = duplicatedElements.find((element) => element.originalElementId === tabPanelId);
+        if (tabPanel && tab) {
+          (0, import_editor_elements16.updateElementSettings)({
+            withHistory: false,
+            id: tab.id,
+            props: {
+              "tab-panel-id": import_editor_props16.stringPropTypeUtil.create(tabPanel.id)
+            }
+          });
+          (0, import_editor_elements16.updateElementSettings)({
+            withHistory: false,
+            id: tabPanel.id,
+            props: {
+              "tab-id": import_editor_props16.stringPropTypeUtil.create(tab.id)
+            }
+          });
+        }
+      }
+    });
+  });
+};
+var moveItem = ({
+  toIndex,
+  tabListId,
+  tabContentId,
+  movedElementId
+}) => {
+  const { value: tabPanelId } = (0, import_editor_elements16.getElementSetting)(movedElementId, "tab-panel-id") ?? {};
+  if (!tabPanelId) {
+    throw new Error("Required tab elements not found for reordering");
+  }
+  (0, import_editor_elements16.moveElements)({
+    title: (0, import_i18n63.__)("Reorder Tabs", "elementor"),
+    moves: [
+      {
+        elementId: movedElementId,
+        targetContainerId: tabListId,
+        options: { at: toIndex }
+      },
+      {
+        elementId: tabPanelId,
+        targetContainerId: tabContentId,
+        options: { at: toIndex }
+      }
+    ]
+  });
+};
+var removeItem = ({ items: items3 }) => {
+  (0, import_editor_elements16.removeElements)({
+    title: (0, import_i18n63.__)("Tabs", "elementor"),
+    elementIds: items3.flatMap(({ item }) => {
+      const tabId = item.id;
+      const { value: panelId } = (0, import_editor_elements16.getElementSetting)(tabId, "tab-panel-id") ?? {};
+      if (!panelId) {
+        throw new Error("Pane ID is required");
+      }
+      return [tabId, panelId];
+    })
+  });
+};
+var addItem = ({
+  tabContentId,
+  tabListId,
+  items: items3
+}) => {
+  items3.forEach(({ item, index }) => {
+    const newTabPanelId = (0, import_editor_elements16.generateElementId)();
+    const newTabId = (0, import_editor_elements16.generateElementId)();
+    (0, import_editor_elements16.createElements)({
+      title: (0, import_i18n63.__)("Tabs", "elementor"),
+      elements: [
+        {
+          containerId: tabContentId,
+          model: {
+            id: newTabPanelId,
+            elType: TAB_PANEL_ELEMENT_TYPE,
             settings: {
-              "tab-id": import_editor_props15.stringPropTypeUtil.create(newTabId)
+              "tab-id": import_editor_props16.stringPropTypeUtil.create(newTabId)
             },
             editor_settings: { title: `Tab ${index + 1} panel` }
           }
@@ -5077,7 +5358,7 @@ var addItem = ({
             elType: TAB_ELEMENT_TYPE,
             settings: {
               ...item,
-              "tab-panel-id": import_editor_props15.stringPropTypeUtil.create(newTabPanelId)
+              "tab-panel-id": import_editor_props16.stringPropTypeUtil.create(newTabPanelId)
             },
             editor_settings: { title: `Tab ${index + 1}` }
           }
@@ -5092,14 +5373,14 @@ var TAB_LIST_ELEMENT_TYPE = "e-tabs-list";
 var TAB_CONTENT_ELEMENT_TYPE = "e-tabs-content";
 var TabsControl = ({ label }) => {
   const { element } = useElement();
-  const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements15.useElementChildren)(element.id, [
+  const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, import_editor_elements17.useElementChildren)(element.id, [
     TAB_ELEMENT_TYPE,
     TAB_PANEL_ELEMENT_TYPE
   ]);
   const tabList = getElementByType(element.id, TAB_LIST_ELEMENT_TYPE);
   const tabContent = getElementByType(element.id, TAB_CONTENT_ELEMENT_TYPE);
   const repeaterValues = tabLinks.map((tabLink) => {
-    const { title: titleSetting } = (0, import_editor_elements15.getElementEditorSettings)(tabLink.id) ?? {};
+    const { title: titleSetting } = (0, import_editor_elements17.getElementEditorSettings)(tabLink.id) ?? {};
     return {
       id: tabLink.id,
       title: titleSetting
@@ -5128,8 +5409,8 @@ var TabsControl = ({ label }) => {
       });
     }
   };
-  return /* @__PURE__ */ React85.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n62.__)("Tabs", "elementor") }, /* @__PURE__ */ React85.createElement(
-    import_editor_controls51.Repeater,
+  return /* @__PURE__ */ React91.createElement(
+    import_editor_controls54.Repeater,
     {
       addToBottom: true,
       showToggle: false,
@@ -5139,360 +5420,105 @@ var TabsControl = ({ label }) => {
       label,
       itemSettings: {
         initialValues: { title: "Tab" },
-        Label: (props) => /* @__PURE__ */ React85.createElement(ElementItem, { ...props }, /* @__PURE__ */ React85.createElement(ItemLabel, { value: props.value })),
-        Content: (props) => /* @__PURE__ */ React85.createElement(ElementItem, { ...props }, /* @__PURE__ */ React85.createElement(ItemContent, null)),
+        Label: ItemLabel,
+        Content: ItemContent,
         Icon: () => null
       }
     }
-  ));
+  );
 };
 var ItemLabel = ({ value }) => {
   const id = value.id ?? "";
-  const { value: defaultItem } = (0, import_editor_controls51.useBoundProp)(import_editor_props16.stringPropTypeUtil);
-  const isDefault = defaultItem === id;
-  const editorSettings = (0, import_editor_elements15.useElementEditorSettings)(id);
+  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(id);
   const elementTitle = editorSettings?.title;
-  return /* @__PURE__ */ React85.createElement(import_ui41.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React85.createElement("span", null, elementTitle), isDefault && /* @__PURE__ */ React85.createElement(import_ui41.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n62.__)("Default", "elementor") }));
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { sx: { minHeight: 20 }, direction: "row", alignItems: "center", gap: 1.5 }, /* @__PURE__ */ React91.createElement("span", null, elementTitle), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(ItemDefaultTab, { value })));
 };
-var ItemContent = () => {
-  const { element } = useElement();
-  const editorSettings = (0, import_editor_elements15.useElementEditorSettings)(element.id);
-  const label = editorSettings?.title ?? "";
-  const { value: defaultItem, setValue: setDefaultItem } = (0, import_editor_controls51.useBoundProp)(import_editor_props16.stringPropTypeUtil);
-  const isDefault = defaultItem === element.id;
-  return /* @__PURE__ */ React85.createElement(import_ui41.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_ui41.Stack, { gap: 1 }, /* @__PURE__ */ React85.createElement(import_editor_controls51.ControlFormLabel, null, (0, import_i18n62.__)("Tab name", "elementor")), /* @__PURE__ */ React85.createElement(
-    import_ui41.TextField,
-    {
-      size: "tiny",
-      value: label,
-      onChange: ({ target }) => {
-        (0, import_editor_elements15.updateElementEditorSettings)({
-          elementId: element.id,
-          settings: { title: target.value }
-        });
-      }
-    }
-  )), /* @__PURE__ */ React85.createElement(import_ui41.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React85.createElement(import_editor_controls51.ControlFormLabel, null, (0, import_i18n62.__)("Set as default tab", "elementor")), /* @__PURE__ */ React85.createElement(ConditionalTooltip, { showTooltip: isDefault, content: tooltipContent, placement: "right" }, /* @__PURE__ */ React85.createElement(
-    import_ui41.Switch,
+var ItemDefaultTab = ({ value }) => {
+  const id = value.id ?? "";
+  const { value: defaultItem } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.stringPropTypeUtil);
+  const isDefault = defaultItem === id;
+  if (!isDefault) {
+    return null;
+  }
+  return /* @__PURE__ */ React91.createElement(import_ui46.Chip, { size: "tiny", shape: "rounded", label: (0, import_i18n64.__)("Default", "elementor") });
+};
+var ItemContent = ({ value }) => {
+  if (!value.id) {
+    return null;
+  }
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { p: 2, gap: 1.5 }, /* @__PURE__ */ React91.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ React91.createElement(SettingsField, { bind: "default-active-tab", propDisplayName: (0, import_i18n64.__)("Tabs", "elementor") }, /* @__PURE__ */ React91.createElement(DefaultTabControl, { elementId: value.id })));
+};
+var DefaultTabControl = ({ elementId }) => {
+  const { value, setValue } = (0, import_editor_controls54.useBoundProp)(import_editor_props17.stringPropTypeUtil);
+  const isDefault = value === elementId;
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n64.__)("Set as default tab", "elementor")), /* @__PURE__ */ React91.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React91.createElement(
+    import_ui46.Switch,
     {
       size: "small",
       checked: isDefault,
       disabled: isDefault,
       onChange: ({ target }) => {
-        setDefaultItem(target.checked ? element.id : null);
+        setValue(target.checked ? elementId : null);
       },
       inputProps: {
         ...isDefault ? { style: { opacity: 0, cursor: "not-allowed" } } : {}
       }
     }
-  ))));
+  )));
 };
-var ElementItem = ({ children, value }) => {
-  const elementType = (0, import_editor_elements15.getElementType)(TAB_ELEMENT_TYPE);
-  if (!elementType) {
-    return null;
-  }
-  const element = {
-    id: value.id ?? "",
-    type: elementType.key
-  };
-  return /* @__PURE__ */ React85.createElement(ElementProvider, { element, elementType }, children);
+var TabLabelControl = ({ elementId }) => {
+  const editorSettings = (0, import_editor_elements17.useElementEditorSettings)(elementId);
+  const label = editorSettings?.title ?? "";
+  return /* @__PURE__ */ React91.createElement(import_ui46.Stack, { gap: 1 }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlFormLabel, null, (0, import_i18n64.__)("Tab name", "elementor")), /* @__PURE__ */ React91.createElement(
+    import_ui46.TextField,
+    {
+      size: "tiny",
+      value: label,
+      onChange: ({ target }) => {
+        (0, import_editor_elements17.updateElementEditorSettings)({
+          elementId,
+          settings: { title: target.value }
+        });
+      }
+    }
+  ));
 };
-var tooltipContent = /* @__PURE__ */ React85.createElement(import_ui41.Alert, { color: "secondary", icon: /* @__PURE__ */ React85.createElement(import_icons24.InfoCircleFilledIcon, { fontSize: "tiny" }), size: "small", sx: { width: 288 } }, /* @__PURE__ */ React85.createElement(import_ui41.Typography, { variant: "body2" }, (0, import_i18n62.__)("To change the default tab, simply set another tab as default.", "elementor")));
 var ConditionalTooltip = ({
   showTooltip,
-  children,
-  content,
-  ...props
+  children
 }) => {
   if (!showTooltip) {
     return children;
   }
-  return /* @__PURE__ */ React85.createElement(import_ui41.Infotip, { content, arrow: false, ...props }, /* @__PURE__ */ React85.createElement("span", null, children));
-};
-
-// src/controls-registry/controls-registry.tsx
-var controlTypes = {
-  image: { component: import_editor_controls52.ImageControl, layout: "full", propTypeUtil: import_editor_props17.imagePropTypeUtil },
-  "svg-media": { component: import_editor_controls52.SvgMediaControl, layout: "full", propTypeUtil: import_editor_props17.imageSrcPropTypeUtil },
-  text: { component: import_editor_controls52.TextControl, layout: "full", propTypeUtil: import_editor_props17.stringPropTypeUtil },
-  textarea: { component: import_editor_controls52.TextAreaControl, layout: "full", propTypeUtil: import_editor_props17.stringPropTypeUtil },
-  size: { component: import_editor_controls52.SizeControl, layout: "two-columns", propTypeUtil: import_editor_props17.sizePropTypeUtil },
-  select: { component: import_editor_controls52.SelectControlWrapper, layout: "two-columns", propTypeUtil: import_editor_props17.stringPropTypeUtil },
-  link: { component: import_editor_controls52.LinkControl, layout: "custom", propTypeUtil: import_editor_props17.linkPropTypeUtil },
-  query: { component: import_editor_controls52.QueryControl, layout: "full", propTypeUtil: import_editor_props17.queryPropTypeUtil },
-  url: { component: import_editor_controls52.UrlControl, layout: "full", propTypeUtil: import_editor_props17.stringPropTypeUtil },
-  switch: { component: import_editor_controls52.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props17.booleanPropTypeUtil },
-  number: { component: import_editor_controls52.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props17.numberPropTypeUtil },
-  repeatable: { component: import_editor_controls52.RepeatableControl, layout: "full", propTypeUtil: void 0 },
-  "key-value": { component: import_editor_controls52.KeyValueControl, layout: "full", propTypeUtil: import_editor_props17.keyValuePropTypeUtil },
-  "html-tag": { component: import_editor_controls52.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props17.stringPropTypeUtil },
-  toggle: { component: import_editor_controls52.ToggleControl, layout: "full", propTypeUtil: import_editor_props17.stringPropTypeUtil }
-};
-var ControlsRegistry = class {
-  constructor(controlsRegistry2) {
-    this.controlsRegistry = controlsRegistry2;
-    this.controlsRegistry = controlsRegistry2;
-  }
-  get(type) {
-    return this.controlsRegistry[type]?.component;
-  }
-  getLayout(type) {
-    return this.controlsRegistry[type]?.layout;
-  }
-  getPropTypeUtil(type) {
-    return this.controlsRegistry[type]?.propTypeUtil;
-  }
-  registry() {
-    return this.controlsRegistry;
-  }
-  register(type, component, layout, propTypeUtil) {
-    if (this.controlsRegistry[type]) {
-      throw new ControlTypeAlreadyRegisteredError({ context: { controlType: type } });
-    }
-    this.controlsRegistry[type] = { component, layout, propTypeUtil };
-  }
-  unregister(type) {
-    if (!this.controlsRegistry[type]) {
-      throw new ControlTypeNotRegisteredError({ context: { controlType: type } });
-    }
-    delete this.controlsRegistry[type];
-  }
-};
-var controlsRegistry = new ControlsRegistry(controlTypes);
-controlsRegistry.register("tabs", TabsControl, "full", void 0);
-
-// src/init.ts
-var import_editor = require("@elementor/editor");
-var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-
-// src/hooks/use-open-editor-panel.ts
-var import_react39 = require("react");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-
-// src/panel.ts
-var import_editor_panels2 = require("@elementor/editor-panels");
-
-// src/components/editing-panel.tsx
-var React91 = __toESM(require("react"));
-var import_editor_controls54 = require("@elementor/editor-controls");
-var import_editor_elements16 = require("@elementor/editor-elements");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui6 = require("@elementor/editor-ui");
-var import_icons25 = require("@elementor/icons");
-var import_session8 = require("@elementor/session");
-var import_ui46 = require("@elementor/ui");
-var import_i18n64 = require("@wordpress/i18n");
-
-// src/components/editing-panel-error-fallback.tsx
-var React86 = __toESM(require("react"));
-var import_ui42 = require("@elementor/ui");
-function EditorPanelErrorFallback() {
-  return /* @__PURE__ */ React86.createElement(import_ui42.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React86.createElement(import_ui42.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React86.createElement("strong", null, "Something went wrong")));
-}
-
-// src/components/editing-panel-tabs.tsx
-var React90 = __toESM(require("react"));
-var import_react38 = require("react");
-var import_ui45 = require("@elementor/ui");
-var import_i18n63 = require("@wordpress/i18n");
-
-// src/components/settings-tab.tsx
-var React89 = __toESM(require("react"));
-var import_editor_controls53 = require("@elementor/editor-controls");
-var import_session7 = require("@elementor/session");
-var import_ui44 = require("@elementor/ui");
-
-// src/controls-registry/control.tsx
-var React87 = __toESM(require("react"));
-var Control = ({ props, type }) => {
-  const ControlByType = controlsRegistry.get(type);
-  const { element } = useElement();
-  if (!ControlByType) {
-    throw new ControlTypeNotFoundError({
-      context: { controlType: type }
-    });
-  }
-  return /* @__PURE__ */ React87.createElement(ControlByType, { ...props, context: { elementId: element.id } });
-};
-
-// src/controls-registry/control-type-container.tsx
-var React88 = __toESM(require("react"));
-var import_ui43 = require("@elementor/ui");
-var ControlTypeContainer = ({ children, layout }) => {
-  if (layout === "custom") {
-    return children;
-  }
-  return /* @__PURE__ */ React88.createElement(StyledContainer, { layout }, children);
-};
-var StyledContainer = (0, import_ui43.styled)(import_ui43.Box, {
-  shouldForwardProp: (prop) => !["layout"].includes(prop)
-})(({ layout, theme }) => ({
-  display: "grid",
-  gridGap: theme.spacing(1),
-  ...getGridLayout(layout)
-}));
-var getGridLayout = (layout) => ({
-  justifyContent: "space-between",
-  gridTemplateColumns: {
-    full: "minmax(0, 1fr)",
-    "two-columns": "repeat(2, minmax(0, 1fr))"
-  }[layout]
-});
-
-// src/components/settings-tab.tsx
-var SettingsTab = () => {
-  const { elementType, element } = useElement();
-  const settingsDefault = useDefaultPanelSettings();
-  const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
-  return /* @__PURE__ */ React89.createElement(import_session7.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React89.createElement(SectionsList, null, elementType.controls.map((control, index) => {
-    if (isControl(control)) {
-      return /* @__PURE__ */ React89.createElement(Control2, { key: getKey(control, element), control });
-    }
-    const { type, value } = control;
-    if (type === "section") {
-      return /* @__PURE__ */ React89.createElement(
-        Section,
+  return /* @__PURE__ */ React91.createElement(
+    import_ui46.Infotip,
+    {
+      arrow: false,
+      content: /* @__PURE__ */ React91.createElement(
+        import_ui46.Alert,
         {
-          title: value.label,
-          key: type + "." + index,
-          defaultExpanded: isDefaultExpanded(value.label)
+          color: "secondary",
+          icon: /* @__PURE__ */ React91.createElement(import_icons25.InfoCircleFilledIcon, { fontSize: "tiny" }),
+          size: "small",
+          sx: { width: 288 }
         },
-        value.items?.map((item) => {
-          if (isControl(item)) {
-            return /* @__PURE__ */ React89.createElement(Control2, { key: getKey(item, element), control: item });
-          }
-          return null;
-        })
-      );
-    }
-    return null;
-  })));
-};
-var Control2 = ({ control: { value, type } }) => {
-  if (!controlsRegistry.get(value.type)) {
-    return null;
-  }
-  const layout = value.meta?.layout || controlsRegistry.getLayout(value.type);
-  const controlProps = populateChildControlProps(value.props);
-  if (layout === "custom") {
-    controlProps.label = value.label;
-  }
-  if (type === "element-control") {
-    return /* @__PURE__ */ React89.createElement(ControlLayout, { control: value, layout, controlProps });
-  }
-  return /* @__PURE__ */ React89.createElement(SettingsField, { bind: value.bind, propDisplayName: value.label || value.bind }, /* @__PURE__ */ React89.createElement(ControlLayout, { control: value, layout, controlProps }));
-};
-var ControlLayout = ({
-  control,
-  layout,
-  controlProps
-}) => {
-  return /* @__PURE__ */ React89.createElement(React89.Fragment, null, control.meta?.topDivider && /* @__PURE__ */ React89.createElement(import_ui44.Divider, null), /* @__PURE__ */ React89.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ React89.createElement(import_editor_controls53.ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React89.createElement(Control, { type: control.type, props: controlProps })));
-};
-function populateChildControlProps(props) {
-  if (props.childControlType) {
-    const childComponent = controlsRegistry.get(props.childControlType);
-    const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType);
-    props = {
-      ...props,
-      childControlConfig: {
-        component: childComponent,
-        props: props.childControlProps || {},
-        propTypeUtil: childPropType
-      }
-    };
-  }
-  return props;
-}
-function getKey(control, element) {
-  if (control.type === "control") {
-    return control.value.bind + "." + element.id;
-  }
-  return control.value.type + "." + element.id;
-}
-function isControl(control) {
-  return control.type === "control" || control.type === "element-control";
-}
-
-// src/components/editing-panel-tabs.tsx
-var EditingPanelTabs = () => {
-  const { element } = useElement();
-  return (
-    // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
-    // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React90.createElement(import_react38.Fragment, { key: element.id }, /* @__PURE__ */ React90.createElement(PanelTabContent, null))
-  );
-};
-var PanelTabContent = () => {
-  const editorDefaults = useDefaultPanelSettings();
-  const defaultComponentTab = editorDefaults.defaultTab;
-  const [currentTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
-  const { getTabProps, getTabPanelProps, getTabsProps } = (0, import_ui45.useTabs)(currentTab);
-  return /* @__PURE__ */ React90.createElement(ScrollProvider, null, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React90.createElement(import_ui45.Stack, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React90.createElement(
-    import_ui45.Tabs,
-    {
-      variant: "fullWidth",
-      size: "small",
-      sx: { mt: 0.5 },
-      ...getTabsProps(),
-      onChange: (_, newValue) => {
-        getTabsProps().onChange(_, newValue);
-        setCurrentTab(newValue);
-      }
+        /* @__PURE__ */ React91.createElement(import_ui46.Typography, { variant: "body2" }, (0, import_i18n64.__)("To change the default tab, simply set another tab as default.", "elementor"))
+      )
     },
-    /* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n63.__)("General", "elementor"), ...getTabProps("settings") }),
-    /* @__PURE__ */ React90.createElement(import_ui45.Tab, { label: (0, import_i18n63.__)("Style", "elementor"), ...getTabProps("style") })
-  ), /* @__PURE__ */ React90.createElement(import_ui45.Divider, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React90.createElement(SettingsTab, null)), /* @__PURE__ */ React90.createElement(import_ui45.TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React90.createElement(StyleTab, null))));
-};
-
-// src/components/editing-panel.tsx
-var { useMenuItems } = controlActionsMenu;
-var EditingPanel = () => {
-  const { element, elementType } = (0, import_editor_elements16.useSelectedElement)();
-  const controlReplacements = getControlReplacements();
-  const menuItems = useMenuItems().default;
-  if (!element || !elementType) {
-    return null;
-  }
-  const panelTitle = (0, import_i18n64.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React91.createElement(import_ui46.ErrorBoundary, { fallback: /* @__PURE__ */ React91.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React91.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React91.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React91.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React91.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React91.createElement(import_icons25.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React91.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React91.createElement(import_editor_controls54.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React91.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React91.createElement(EditingPanelTabs, null)))))))));
-};
-
-// src/panel.ts
-var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__createPanel)({
-  id: "editing-panel",
-  component: EditingPanel
-});
-
-// src/sync/is-atomic-widget-selected.ts
-var import_editor_elements17 = require("@elementor/editor-elements");
-var isAtomicWidgetSelected = () => {
-  const selectedElements = (0, import_editor_elements17.getSelectedElements)();
-  const widgetCache = (0, import_editor_elements17.getWidgetsCache)();
-  if (selectedElements.length !== 1) {
-    return false;
-  }
-  return !!widgetCache?.[selectedElements[0].type]?.atomic_controls;
+    /* @__PURE__ */ React91.createElement("span", null, children)
+  );
 };
 
-// src/hooks/use-open-editor-panel.ts
-var useOpenEditorPanel = () => {
-  const { open } = usePanelActions();
-  (0, import_react39.useEffect)(() => {
-    return (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("panel/editor/open"), () => {
-      if (isAtomicWidgetSelected()) {
-        open();
-      }
-    });
-  }, []);
+// src/controls-registry/element-controls/registry.ts
+var controlTypes2 = {
+  tabs: { component: TabsControl, layout: "full" }
 };
-
-// src/components/editing-panel-hooks.tsx
-var EditingPanelHooks = () => {
-  useOpenEditorPanel();
-  return null;
+var registerElementControls = () => {
+  Object.entries(controlTypes2).forEach(
+    ([type, { component, layout }]) => {
+      controlsRegistry.register(type, component, layout);
+    }
+  );
 };
 
 // src/dynamics/init.ts
@@ -6272,6 +6298,7 @@ function init3() {
   });
   init();
   init2();
+  registerElementControls();
   initResetStyleProps();
 }
 var blockV1Panel = () => {