@elementor/editor-global-classes 3.33.0-99 → 3.34.3

package/dist/index.js

@@ -36,23 +36,23 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store24 = require("@elementor/store");
+var import_editor_styles_repository6 = require("@elementor/editor-styles-repository");
+var import_store26 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui16 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/global-classes-styles-provider.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store2 = require("@elementor/store");
+var import_store4 = require("@elementor/store");
 var import_i18n = require("@wordpress/i18n");
 
 // src/capabilities.ts
@@ -81,9 +81,12 @@ var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
   code: "global_class_label_already_exists",
   message: "Class with this name already exists."
 });
+var GlobalClassTrackingError = (0, import_utils.createError)({
+  code: "global_class_tracking_error",
+  message: "Error tracking global classes event."
+});
 
 // src/store.ts
-var import_editor_props = require("@elementor/editor-props");
 var import_editor_styles = require("@elementor/editor-styles");
 var import_store = require("@elementor/store");
 
@@ -199,6 +202,13 @@ var slice = (0, import_store.__createSlice)({
       state.data.items[payload.style.id] = mergedData;
       state.isDirty = true;
     },
+    updateMultiple(state, { payload }) {
+      localHistory.next(state.data);
+      Object.entries(payload).forEach(([id2, { modified }]) => {
+        state.data.items[id2].label = modified;
+      });
+      state.isDirty = false;
+    },
     updateProps(state, {
       payload
     }) {
@@ -211,7 +221,7 @@ var slice = (0, import_store.__createSlice)({
       let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
       customCss = customCss?.raw ? customCss : null;
       if (variant) {
-        variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
+        variant.props = mergeProps(variant.props, payload.props);
         variant.custom_css = customCss;
         style.variants = getNonEmptyVariants(style);
       } else {
@@ -256,6 +266,17 @@ var slice = (0, import_store.__createSlice)({
     }
   }
 });
+var mergeProps = (current, updates) => {
+  const props = Array.isArray(current) ? {} : current;
+  Object.entries(updates).forEach(([key, value]) => {
+    if (value === null || value === void 0) {
+      delete props[key];
+    } else {
+      props[key] = value;
+    }
+  });
+  return props;
+};
 var getNonEmptyVariants = (style) => {
   return style.variants.filter(
     ({ props, custom_css: customCss }) => Object.keys(props).length || customCss?.raw
@@ -278,8 +299,159 @@ var selectEmptyCssClass = (0, import_store.__createSelector)(
   ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
 );
 
+// src/utils/tracking.ts
+var import_mixpanel = require("@elementor/mixpanel");
+var import_store2 = require("@elementor/store");
+
+// src/api.ts
+var import_http_client = require("@elementor/http-client");
+var RESOURCE_URL = "/global-classes";
+var BASE_URL = "elementor/v1";
+var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
+var apiClient = {
+  usage: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
+  all: (context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, {
+    params: { context: context2 }
+  }),
+  publish: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "frontend"
+    }
+  }),
+  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "preview"
+    }
+  })
+};
+var API_ERROR_CODES = {
+  DUPLICATED_LABEL: "DUPLICATED_LABEL"
+};
+
+// src/components/css-class-usage/utils.ts
+var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
+  acc[key] = {
+    content: value || [],
+    total: value.reduce((total, val) => total + (val?.total || 0), 0)
+  };
+  return acc;
+}, {});
+
+// service/css-class-usage-service.ts
+var fetchCssClassUsage = async () => {
+  const response = await apiClient.usage();
+  return transformData(response?.data?.data || {});
+};
+
+// src/utils/tracking.ts
+var trackGlobalClasses = async (payload) => {
+  const { runAction } = payload;
+  const data = await getSanitizedData(payload);
+  if (data) {
+    track(data);
+    if (data.event === "classCreated" && "classId" in data) {
+      fireClassApplied(data.classId);
+    }
+  }
+  runAction?.();
+};
+var fireClassApplied = async (classId) => {
+  const appliedInfo = await getAppliedInfo(classId);
+  track({
+    event: "classApplied",
+    classId,
+    ...appliedInfo,
+    totalInstancesAfterApply: 1
+  });
+};
+var getSanitizedData = async (payload) => {
+  switch (payload.event) {
+    case "classApplied":
+      if ("classId" in payload && payload.classId) {
+        const appliedInfo = await getAppliedInfo(payload.classId);
+        return { ...payload, ...appliedInfo };
+      }
+      break;
+    case "classRemoved":
+      if ("classId" in payload && payload.classId) {
+        const deleteInfo = getRemovedInfo(payload.classId);
+        return { ...payload, ...deleteInfo };
+      }
+      break;
+    case "classDeleted":
+      if ("classId" in payload && payload.classId) {
+        const deleteInfo = await trackDeleteClass(payload.classId);
+        return { ...payload, ...deleteInfo };
+      }
+      break;
+    case "classCreated":
+      if ("source" in payload && payload.source !== "created") {
+        if ("classId" in payload && payload.classId) {
+          return { ...payload, classTitle: getCssClass(payload.classId).label };
+        }
+      }
+      return payload;
+    case "classStateClicked":
+      if ("classId" in payload && payload.classId) {
+        return { ...payload, classTitle: getCssClass(payload.classId).label };
+      }
+      break;
+    default:
+      return payload;
+  }
+};
+var track = (data) => {
+  const { dispatchEvent, config } = (0, import_mixpanel.getMixpanel)();
+  if (!config?.names?.global_classes?.[data.event]) {
+    console.error("Global class tracking event not found", { event: data.event });
+    return;
+  }
+  const name = config.names.global_classes[data.event];
+  const { event, ...eventData } = data;
+  try {
+    dispatchEvent?.(name, {
+      event,
+      ...eventData
+    });
+  } catch (error) {
+    throw new GlobalClassTrackingError({ cause: error });
+  }
+};
+var extractCssClassData = (classId) => {
+  const cssClass = getCssClass(classId);
+  const classTitle = cssClass.label;
+  return { classTitle };
+};
+var getCssClass = (classId) => {
+  const cssClass = selectClass((0, import_store2.__getState)(), classId);
+  if (!cssClass) {
+    throw new Error(`CSS class with ID ${classId} not found`);
+  }
+  return cssClass;
+};
+var trackDeleteClass = async (classId) => {
+  const totalInstances = await getTotalInstancesByCssClassID(classId);
+  const classTitle = getCssClass(classId).label;
+  return { totalInstances, classTitle };
+};
+var getTotalInstancesByCssClassID = async (classId) => {
+  const cssClassUsage = await fetchCssClassUsage();
+  return cssClassUsage[classId]?.total ?? 1;
+};
+var getAppliedInfo = async (classId) => {
+  const { classTitle } = extractCssClassData(classId);
+  const totalInstancesAfterApply = await getTotalInstancesByCssClassID(classId) + 1;
+  return { classTitle, totalInstancesAfterApply };
+};
+var getRemovedInfo = (classId) => {
+  const { classTitle } = extractCssClassData(classId);
+  return {
+    classTitle
+  };
+};
+
 // src/global-classes-styles-provider.ts
-var MAX_CLASSES = 50;
+var MAX_CLASSES = 100;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
 var globalClassesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: GLOBAL_CLASSES_PROVIDER_KEY,
@@ -292,20 +464,24 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
   subscribe: (cb) => subscribeWithStates(cb),
   capabilities: getCapabilities(),
   actions: {
-    all: () => selectOrderedClasses((0, import_store2.__getState)()),
-    get: (id2) => selectClass((0, import_store2.__getState)(), id2),
+    all: () => {
+      const selectAllClasses = selectOrderedClasses((0, import_store4.__getState)());
+      localStorage.setItem("elementor-global-classes", JSON.stringify(selectAllClasses));
+      return selectAllClasses;
+    },
+    get: (id2) => selectClass((0, import_store4.__getState)(), id2),
     resolveCssName: (id2) => {
-      return selectClass((0, import_store2.__getState)(), id2)?.label ?? id2;
+      return selectClass((0, import_store4.__getState)(), id2)?.label ?? id2;
     },
     create: (label, variants = []) => {
-      const classes = selectGlobalClasses((0, import_store2.__getState)());
+      const classes = selectGlobalClasses((0, import_store4.__getState)());
       const existingLabels = Object.values(classes).map((style) => style.label);
       if (existingLabels.includes(label)) {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = Object.keys(classes);
       const id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
-      (0, import_store2.__dispatch)(
+      (0, import_store4.__dispatch)(
         slice.actions.add({
           id: id2,
           type: "class",
@@ -316,17 +492,17 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
       return id2;
     },
     update: (payload) => {
-      (0, import_store2.__dispatch)(
+      (0, import_store4.__dispatch)(
         slice.actions.update({
           style: payload
         })
       );
     },
     delete: (id2) => {
-      (0, import_store2.__dispatch)(slice.actions.delete(id2));
+      (0, import_store4.__dispatch)(slice.actions.delete(id2));
     },
     updateProps: (args) => {
-      (0, import_store2.__dispatch)(
+      (0, import_store4.__dispatch)(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -335,7 +511,7 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
       );
     },
     updateCustomCss: (args) => {
-      (0, import_store2.__dispatch)(
+      (0, import_store4.__dispatch)(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -343,12 +519,17 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
           props: {}
         })
       );
+    },
+    tracking: (data) => {
+      trackGlobalClasses(data).catch((error) => {
+        throw new GlobalClassTrackingError({ cause: error });
+      });
     }
   }
 });
 var subscribeWithStates = (cb) => {
-  let previousState = selectData((0, import_store2.__getState)());
-  return (0, import_store2.__subscribeWithSelector)(
+  let previousState = selectData((0, import_store4.__getState)());
+  return (0, import_store4.__subscribeWithSelector)(
     (state) => state.globalClasses,
     (currentState) => {
       cb(previousState.items, currentState.data.items);
@@ -360,43 +541,6 @@ var subscribeWithStates = (cb) => {
 // src/hooks/use-prefetch-css-class-usage.ts
 var import_query = require("@elementor/query");
 
-// src/api.ts
-var import_http_client = require("@elementor/http-client");
-var RESOURCE_URL = "/global-classes";
-var BASE_URL = "elementor/v1";
-var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
-var apiClient = {
-  usage: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
-  all: (context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, {
-    params: { context: context2 }
-  }),
-  publish: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "frontend"
-    }
-  }),
-  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "preview"
-    }
-  })
-};
-
-// src/components/css-class-usage/utils.ts
-var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
-  acc[key] = {
-    content: value || [],
-    total: value.reduce((total, val) => total + (val?.total || 0), 0)
-  };
-  return acc;
-}, {});
-
-// service/css-class-usage-service.ts
-var fetchCssClassUsage = async () => {
-  const response = await apiClient.usage();
-  return transformData(response.data.data);
-};
-
 // src/components/css-class-usage/types.ts
 var QUERY_KEY = "css-classes-usage";
 
@@ -409,30 +553,35 @@ function usePrefetchCssClassUsage() {
   });
   return { prefetchClassesUsage };
 }
+var PrefetchCssClassUsage = () => {
+  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
+  prefetchClassesUsage();
+  return null;
+};
 
 // src/components/class-manager/class-manager-panel.tsx
-var React17 = __toESM(require("react"));
-var import_react9 = require("react");
+var React18 = __toESM(require("react"));
+var import_react8 = require("react");
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui6 = require("@elementor/editor-ui");
+var import_editor_ui8 = require("@elementor/editor-ui");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons12 = require("@elementor/icons");
 var import_query3 = require("@elementor/query");
-var import_store18 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 var import_ui15 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
-var import_store4 = require("@elementor/store");
+var import_store6 = require("@elementor/store");
 var useClassesOrder = () => {
-  return (0, import_store4.__useSelector)(selectOrder);
+  return (0, import_store6.__useSelector)(selectOrder);
 };
 
 // src/hooks/use-dirty-state.ts
-var import_store6 = require("@elementor/store");
+var import_store8 = require("@elementor/store");
 var useDirtyState = () => {
-  return (0, import_store6.__useSelector)(selectIsDirty);
+  return (0, import_store8.__useSelector)(selectIsDirty);
 };
 
 // src/hooks/use-filters.ts
@@ -450,9 +599,17 @@ var INIT_CHECKED_FILTERS = {
 };
 var SearchAndFilterProvider = ({ children }) => {
   const [filters, setFilters] = React.useState(INIT_CHECKED_FILTERS);
+  const getInitialSearchValue = () => {
+    const storedValue = localStorage.getItem("elementor-global-classes-search");
+    if (storedValue) {
+      localStorage.removeItem("elementor-global-classes-search");
+      return storedValue;
+    }
+    return "";
+  };
   const { debouncedValue, inputValue, handleChange } = (0, import_utils3.useDebounceState)({
     delay: 300,
-    initialValue: ""
+    initialValue: getInitialSearchValue()
   });
   const onClearSearch = () => {
     handleChange("");
@@ -504,12 +661,12 @@ var useCssClassUsage = () => {
 };
 
 // src/hooks/use-empty-css-class.ts
-var import_store8 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var useEmptyCssClass = () => {
-  return (0, import_store8.__useSelector)(selectEmptyCssClass);
+  return (0, import_store10.__useSelector)(selectEmptyCssClass);
 };
 var useAllCssClassesIDs = () => {
-  const cssClasses = (0, import_store8.__useSelector)(selectGlobalClasses);
+  const cssClasses = (0, import_store10.__useSelector)(selectGlobalClasses);
   return Object.keys(cssClasses);
 };
 
@@ -583,25 +740,139 @@ var useFilters = () => {
   }, [filters, allFilters]);
 };
 
-// src/save-global-classes.ts
-var import_store10 = require("@elementor/store");
+// src/save-global-classes.tsx
+var React3 = __toESM(require("react"));
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_store12 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
-async function saveGlobalClasses({ context: context2 }) {
-  const state = selectData((0, import_store10.__getState)());
-  if (context2 === "preview") {
-    await apiClient.saveDraft({
-      items: state.items,
-      order: state.order,
-      changes: calculateChanges(state, selectPreviewInitialData((0, import_store10.__getState)()))
+
+// src/components/class-manager/duplicate-label-dialog.tsx
+var React2 = __toESM(require("react"));
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
+var DUP_PREFIX = "DUP_";
+var DuplicateLabelDialog = ({
+  modifiedLabels,
+  onApprove
+}) => {
+  const handleButtonClick = () => {
+    localStorage.setItem("elementor-global-classes-search", DUP_PREFIX);
+    onApprove?.();
+    (0, import_editor_ui.closeDialog)();
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui.DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(import_ui.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(import_ui.Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "subtitle1" }, (0, import_i18n2.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+    "Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix",
+    "elementor"
+  ), /* @__PURE__ */ React2.createElement("strong", null, " ", DUP_PREFIX)), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(
+    import_ui.Box,
+    {
+      sx: {
+        width: "100%",
+        display: "flex",
+        gap: 2,
+        alignItems: "flex-start"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      import_ui.Typography,
+      {
+        variant: "subtitle2",
+        sx: {
+          fontWeight: "bold",
+          flex: 1,
+          flexShrink: 1,
+          flexGrow: 1,
+          minWidth: 0
+        }
+      },
+      (0, import_i18n2.__)("Before", "elementor")
+    ),
+    /* @__PURE__ */ React2.createElement(
+      import_ui.Typography,
+      {
+        variant: "subtitle2",
+        sx: {
+          minWidth: "200px",
+          fontWeight: "bold",
+          flexShrink: 0,
+          flexGrow: 0,
+          width: "200px",
+          maxWidth: "200px"
+        }
+      },
+      (0, import_i18n2.__)("After", "elementor")
+    )
+  ), /* @__PURE__ */ React2.createElement(import_ui.Divider, { sx: { mt: 0.5, mb: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "column", gap: 0.5, sx: { pb: 2 } }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ React2.createElement(
+    import_ui.Box,
+    {
+      key: index,
+      sx: {
+        width: "100%",
+        display: "flex",
+        gap: 2,
+        alignItems: "flex-start"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      import_ui.Box,
+      {
+        sx: {
+          flex: 1,
+          flexShrink: 1,
+          flexGrow: 1,
+          minWidth: 0
+        }
+      },
+      /* @__PURE__ */ React2.createElement(import_editor_ui.EllipsisWithTooltip, { title: original }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2", sx: { color: "text.secondary" } }, original))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      import_ui.Box,
+      {
+        sx: {
+          minWidth: "200px",
+          flexShrink: 0,
+          flexGrow: 0,
+          width: "200px",
+          maxWidth: "200px"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(import_editor_ui.EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2", sx: { color: "text.primary" } }, modified))
+    )
+  ))), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(import_ui.Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n2.__)("Your designs and classes are safe.", "elementor")), (0, import_i18n2.__)(
+    "Only the prefixes were added. Find them in Class Manager by searching",
+    "elementor"
+  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, (0, import_i18n2.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui.closeDialog }, (0, import_i18n2.__)("Done", "elementor"))));
+};
+
+// src/save-global-classes.tsx
+async function saveGlobalClasses({ context: context2, onApprove }) {
+  const state = selectData((0, import_store12.__getState)());
+  const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
+  const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
+  const response = await apiAction({
+    items: state.items,
+    order: state.order,
+    changes: calculateChanges(state, currentContext((0, import_store12.__getState)()))
+  });
+  (0, import_store12.__dispatch)(slice.actions.reset({ context: context2 }));
+  if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
+    (0, import_store12.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    trackGlobalClasses({
+      event: "classPublishConflict",
+      numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
     });
-  } else {
-    await apiClient.publish({
-      items: state.items,
-      order: state.order,
-      changes: calculateChanges(state, selectFrontendInitialData((0, import_store10.__getState)()))
+    (0, import_editor_ui2.openDialog)({
+      component: /* @__PURE__ */ React3.createElement(
+        DuplicateLabelDialog,
+        {
+          modifiedLabels: response.data.data.modifiedLabels || [],
+          onApprove
+        }
+      )
     });
   }
-  (0, import_store10.__dispatch)(slice.actions.reset({ context: context2 }));
 }
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
@@ -616,21 +887,28 @@ function calculateChanges(state, initialData) {
 }
 
 // src/components/search-and-filter/components/filter/active-filters.tsx
-var React4 = __toESM(require("react"));
-var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var React6 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/components/search-and-filter/components/filter/clear-icon-button.tsx
-var React2 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var import_ui = require("@elementor/ui");
-var ClearIconButton = ({ tooltipText, sx }) => {
+var React4 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var ClearIconButton = ({ tooltipText, sx, trigger }) => {
   const {
     filters: { onClearFilter }
   } = useSearchAndFilters();
-  return /* @__PURE__ */ React2.createElement(import_ui.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(CustomIconButton, { "aria-label": tooltipText, size: "tiny", onClick: onClearFilter, sx }, /* @__PURE__ */ React2.createElement(import_icons.BrushBigIcon, { fontSize: "tiny" }))));
+  const handleClearFilters = () => {
+    onClearFilter(trigger);
+    trackGlobalClasses({
+      event: "classManagerFilterCleared",
+      trigger
+    });
+  };
+  return /* @__PURE__ */ React4.createElement(import_ui2.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React4.createElement(import_ui2.Box, null, /* @__PURE__ */ React4.createElement(CustomIconButton, { "aria-label": tooltipText, size: "tiny", onClick: handleClearFilters, sx }, /* @__PURE__ */ React4.createElement(import_icons2.BrushBigIcon, { fontSize: "tiny" }))));
 };
-var CustomIconButton = (0, import_ui.styled)(import_ui.IconButton)(({ theme }) => ({
+var CustomIconButton = (0, import_ui2.styled)(import_ui2.IconButton)(({ theme }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     "&:hover": {
@@ -640,13 +918,13 @@ var CustomIconButton = (0, import_ui.styled)(import_ui.IconButton)(({ theme }) =
 }));
 
 // src/components/search-and-filter/components/filter/filter-list.tsx
-var React3 = __toESM(require("react"));
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var React5 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
 var filterConfig = {
-  unused: (0, import_i18n2.__)("Unused", "elementor"),
-  empty: (0, import_i18n2.__)("Empty", "elementor"),
-  onThisPage: (0, import_i18n2.__)("On this page", "elementor")
+  unused: (0, import_i18n3.__)("Unused", "elementor"),
+  empty: (0, import_i18n3.__)("Empty", "elementor"),
+  onThisPage: (0, import_i18n3.__)("On this page", "elementor")
 };
 var FilterList = () => {
   const {
@@ -655,32 +933,38 @@ var FilterList = () => {
   const filteredCssClass = useFilteredCssClassUsage();
   const handleOnClick = (value) => {
     setFilters((prev) => ({ ...prev, [value]: !prev[value] }));
+    trackGlobalClasses({
+      event: "classManagerFilterUsed",
+      action: filters[value] ? "remove" : "apply",
+      type: value,
+      trigger: "menu"
+    });
   };
-  return /* @__PURE__ */ React3.createElement(import_ui2.MenuList, null, /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React5.createElement(import_ui3.MenuList, null, /* @__PURE__ */ React5.createElement(import_ui3.MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.unused,
       checked: filters.unused,
-      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.unused.length })
+      suffix: /* @__PURE__ */ React5.createElement(import_ui3.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.unused.length })
     }
-  )), /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ React3.createElement(
+  )), /* @__PURE__ */ React5.createElement(import_ui3.MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.empty,
       checked: filters.empty,
-      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.empty.length })
+      suffix: /* @__PURE__ */ React5.createElement(import_ui3.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.empty.length })
     }
-  )), /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ React3.createElement(
+  )), /* @__PURE__ */ React5.createElement(import_ui3.MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.onThisPage,
       checked: filters.onThisPage,
-      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.onThisPage.length })
+      suffix: /* @__PURE__ */ React5.createElement(import_ui3.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.onThisPage.length })
     }
   )));
 };
-var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React3.createElement(import_ui2.Stack, { direction: "row", alignItems: "center", gap: 0.5, flex: 1 }, /* @__PURE__ */ React3.createElement(
-  import_ui2.Checkbox,
+var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React5.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", gap: 0.5, flex: 1 }, /* @__PURE__ */ React5.createElement(
+  import_ui3.Checkbox,
   {
     size: "small",
     checked,
@@ -692,7 +976,7 @@ var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React3.cre
       }
     }
   }
-), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.secondary" } }, label), suffix);
+), /* @__PURE__ */ React5.createElement(import_ui3.Typography, { variant: "caption", sx: { color: "text.secondary" } }, label), suffix);
 
 // src/components/search-and-filter/components/filter/active-filters.tsx
 var ActiveFilters = () => {
@@ -701,11 +985,17 @@ var ActiveFilters = () => {
   } = useSearchAndFilters();
   const handleRemove = (key) => {
     setFilters((prev) => ({ ...prev, [key]: false }));
+    trackGlobalClasses({
+      event: "classManagerFilterUsed",
+      action: "remove",
+      type: key,
+      trigger: "header"
+    });
   };
   const activeKeys = Object.keys(filters).filter((key) => filters[key]);
   const showClearIcon = activeKeys.length > 0;
-  return /* @__PURE__ */ React4.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React4.createElement(import_ui3.Stack, { direction: "row", gap: 0.5, alignItems: "center", flexWrap: "wrap" }, activeKeys.map((key) => /* @__PURE__ */ React4.createElement(
-    import_ui3.Chip,
+  return /* @__PURE__ */ React6.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React6.createElement(import_ui4.Stack, { direction: "row", gap: 0.5, alignItems: "center", flexWrap: "wrap" }, activeKeys.map((key) => /* @__PURE__ */ React6.createElement(
+    import_ui4.Chip,
     {
       key,
       label: filterConfig[key],
@@ -713,10 +1003,11 @@ var ActiveFilters = () => {
       sx: chipSx,
       size: "tiny"
     }
-  ))), showClearIcon && /* @__PURE__ */ React4.createElement(
+  ))), showClearIcon && /* @__PURE__ */ React6.createElement(
     ClearIconButton,
     {
-      tooltipText: (0, import_i18n3.__)("Clear Filters", "elementor"),
+      trigger: "header",
+      tooltipText: (0, import_i18n4.__)("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -732,31 +1023,38 @@ var chipSx = {
 };
 
 // src/components/search-and-filter/components/filter/css-class-filter.tsx
-var React5 = __toESM(require("react"));
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons2 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var React7 = __toESM(require("react"));
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 var CssClassFilter = () => {
   const {
     filters: { filters }
   } = useSearchAndFilters();
-  const popupState = (0, import_ui4.usePopupState)({
+  const popupState = (0, import_ui5.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
+  React7.useEffect(() => {
+    if (popupState.isOpen) {
+      trackGlobalClasses({
+        event: "classManagerFiltersOpened"
+      });
+    }
+  }, [popupState.isOpen]);
   const showCleanIcon = Object.values(filters).some((value) => value);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui4.Tooltip, { title: (0, import_i18n4.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React5.createElement(
-    import_ui4.ToggleButton,
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { title: (0, import_i18n5.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
+    import_ui5.ToggleButton,
     {
       value: "filter",
       size: "tiny",
       selected: popupState.isOpen,
-      ...(0, import_ui4.bindToggle)(popupState)
+      ...(0, import_ui5.bindToggle)(popupState)
     },
-    /* @__PURE__ */ React5.createElement(import_icons2.FilterIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React5.createElement(
-    import_ui4.Popover,
+    /* @__PURE__ */ React7.createElement(import_icons3.FilterIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(
+    import_ui5.Popover,
     {
       sx: {
         maxWidth: "344px"
@@ -769,78 +1067,84 @@ var CssClassFilter = () => {
         vertical: "top",
         horizontal: -21
       },
-      ...(0, import_ui4.bindPopover)(popupState)
+      ...(0, import_ui5.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React5.createElement(
-      import_editor_ui.PopoverHeader,
+    /* @__PURE__ */ React7.createElement(
+      import_editor_ui3.PopoverHeader,
       {
         actions: showCleanIcon ? [
-          /* @__PURE__ */ React5.createElement(
+          /* @__PURE__ */ React7.createElement(
             ClearIconButton,
             {
+              trigger: "menu",
               key: "clear-all-button",
-              tooltipText: (0, import_i18n4.__)("Clear all", "elementor")
+              tooltipText: (0, import_i18n5.__)("Clear all", "elementor")
             }
           )
         ] : [],
         onClose: popupState.close,
-        title: (0, import_i18n4.__)("Filters", "elementor"),
-        icon: /* @__PURE__ */ React5.createElement(import_icons2.FilterIcon, { fontSize: "tiny" })
+        title: (0, import_i18n5.__)("Filters", "elementor"),
+        icon: /* @__PURE__ */ React7.createElement(import_icons3.FilterIcon, { fontSize: "tiny" })
       }
     ),
-    /* @__PURE__ */ React5.createElement(
-      import_ui4.Divider,
+    /* @__PURE__ */ React7.createElement(
+      import_ui5.Divider,
       {
         sx: {
           borderWidth: "1px 0 0 0"
         }
       }
     ),
-    /* @__PURE__ */ React5.createElement(import_editor_ui.PopoverBody, { width: 344, height: 125 }, /* @__PURE__ */ React5.createElement(FilterList, null))
+    /* @__PURE__ */ React7.createElement(import_editor_ui3.PopoverBody, { width: 344, height: 125 }, /* @__PURE__ */ React7.createElement(FilterList, null))
   ));
 };
 
 // src/components/search-and-filter/components/search/class-manager-search.tsx
-var React6 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var React8 = __toESM(require("react"));
+var import_icons4 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 var ClassManagerSearch = () => {
   const {
     search: { inputValue, handleChange }
   } = useSearchAndFilters();
-  return /* @__PURE__ */ React6.createElement(import_ui5.Stack, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React6.createElement(import_ui5.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React6.createElement(
-    import_ui5.TextField,
+  return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React8.createElement(import_ui6.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React8.createElement(
+    import_ui6.TextField,
     {
       role: "search",
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: (0, import_i18n5.__)("Search", "elementor"),
+      onFocus: () => {
+        trackGlobalClasses({
+          event: "classManagerSearched"
+        });
+      },
+      placeholder: (0, import_i18n6.__)("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React6.createElement(import_ui5.InputAdornment, { position: "start" }, /* @__PURE__ */ React6.createElement(import_icons3.SearchIcon, { fontSize: "tiny" }))
+        startAdornment: /* @__PURE__ */ React8.createElement(import_ui6.InputAdornment, { position: "start" }, /* @__PURE__ */ React8.createElement(import_icons4.SearchIcon, { fontSize: "tiny" }))
       }
     }
   )));
 };
 
 // src/components/class-manager/class-manager-introduction.tsx
-var React7 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react4 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_ui7 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react4.useState)(!isMessageSuppressed);
-  return /* @__PURE__ */ React7.createElement(
-    import_editor_ui2.IntroductionModal,
+  return /* @__PURE__ */ React9.createElement(
+    import_editor_ui4.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n6.__)("Class Manager", "elementor"),
+      title: (0, import_i18n7.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -848,22 +1152,22 @@ var ClassManagerIntroduction = () => {
         setShouldShowIntroduction(false);
       }
     },
-    /* @__PURE__ */ React7.createElement(
-      import_ui6.Image,
+    /* @__PURE__ */ React9.createElement(
+      import_ui7.Image,
       {
         sx: { width: "100%", aspectRatio: "16 / 9" },
         src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
         alt: ""
       }
     ),
-    /* @__PURE__ */ React7.createElement(IntroductionContent, null)
+    /* @__PURE__ */ React9.createElement(IntroductionContent, null)
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React7.createElement(import_ui6.Box, { p: 3 }, /* @__PURE__ */ React7.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n6.__)(
+  return /* @__PURE__ */ React9.createElement(import_ui7.Box, { p: 3 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
     "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
-  )), /* @__PURE__ */ React7.createElement("br", null), /* @__PURE__ */ React7.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n6.__)(
+  )), /* @__PURE__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
@@ -872,11 +1176,17 @@ var IntroductionContent = () => {
 // src/components/class-manager/delete-class.ts
 var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id2) => {
-  (0, import_store12.__dispatch)(slice.actions.delete(id2));
-  isDeleted = true;
+  trackGlobalClasses({
+    event: "classDeleted",
+    classId: id2,
+    runAction: () => {
+      (0, import_store14.__dispatch)(slice.actions.delete(id2));
+      isDeleted = true;
+    }
+  });
 };
 var onDelete = async () => {
   await reloadDocument();
@@ -895,39 +1205,39 @@ var reloadDocument = () => {
 };
 
 // src/components/class-manager/flipped-color-swatch-icon.tsx
-var React8 = __toESM(require("react"));
-var import_icons4 = require("@elementor/icons");
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React8.createElement(import_icons4.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+var React10 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React10.createElement(import_icons5.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
 
 // src/components/class-manager/global-classes-list.tsx
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_store16 = require("@elementor/store");
-var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_store18 = require("@elementor/store");
+var import_ui14 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
-var import_store14 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store14.__useSelector)(selectOrderedClasses);
+  return (0, import_store16.__useSelector)(selectOrderedClasses);
 };
 
 // src/components/class-manager/class-item.tsx
-var React13 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_ui5 = require("@elementor/editor-ui");
-var import_icons9 = require("@elementor/icons");
-var import_ui11 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_icons10 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
-var React9 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_icons5 = require("@elementor/icons");
-var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/hooks/use-css-class-usage-by-id.ts
 var EMPTY_CLASS_USAGE = {
@@ -943,24 +1253,24 @@ var useCssClassUsageByID = (id2) => {
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var iconMapper = {
   "wp-post": {
-    label: (0, import_i18n7.__)("Post", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(import_icons5.PostTypeIcon, { fontSize: "inherit" })
+    label: (0, import_i18n8.__)("Post", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(import_icons6.PostTypeIcon, { fontSize: "inherit" })
   },
   "wp-page": {
-    label: (0, import_i18n7.__)("Page", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(import_icons5.PagesIcon, { fontSize: "inherit" })
+    label: (0, import_i18n8.__)("Page", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(import_icons6.PagesIcon, { fontSize: "inherit" })
   },
   popup: {
-    label: (0, import_i18n7.__)("Popup", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(import_icons5.PopupTemplateIcon, { fontSize: "inherit" })
+    label: (0, import_i18n8.__)("Popup", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(import_icons6.PopupTemplateIcon, { fontSize: "inherit" })
   },
   header: {
-    label: (0, import_i18n7.__)("Header", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(import_icons5.HeaderTemplateIcon, { fontSize: "inherit" })
+    label: (0, import_i18n8.__)("Header", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(import_icons6.HeaderTemplateIcon, { fontSize: "inherit" })
   },
   footer: {
-    label: (0, import_i18n7.__)("Footer", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(import_icons5.FooterTemplateIcon, { fontSize: "inherit" })
+    label: (0, import_i18n8.__)("Footer", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(import_icons6.FooterTemplateIcon, { fontSize: "inherit" })
   }
 };
 var CssClassUsagePopover = ({
@@ -978,42 +1288,49 @@ var CssClassUsagePopover = ({
       docType: type
     })
   ) ?? [];
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-    import_editor_ui3.PopoverHeader,
+  const handleSelect = (value) => {
+    onNavigate(+value);
+    trackGlobalClasses({
+      event: "classUsageLocate",
+      classId: cssClassID
+    });
+  };
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+    import_editor_ui5.PopoverHeader,
     {
-      icon: /* @__PURE__ */ React9.createElement(import_icons5.CurrentLocationIcon, { fontSize: "tiny" }),
-      title: /* @__PURE__ */ React9.createElement(import_ui7.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui7.Box, { "aria-label": "header-title" }, (0, import_i18n7.__)("Locator", "elementor")), /* @__PURE__ */ React9.createElement(import_ui7.Box, null, /* @__PURE__ */ React9.createElement(import_ui7.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      icon: /* @__PURE__ */ React11.createElement(import_icons6.CurrentLocationIcon, { fontSize: "tiny" }),
+      title: /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { "aria-label": "header-title" }, (0, import_i18n8.__)("Locator", "elementor")), /* @__PURE__ */ React11.createElement(import_ui8.Box, null, /* @__PURE__ */ React11.createElement(import_ui8.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
       onClose
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui7.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_ui3.PopoverBody, { width: 300 }, /* @__PURE__ */ React9.createElement(
-    import_editor_ui3.PopoverMenuList,
+  ), /* @__PURE__ */ React11.createElement(import_ui8.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_ui5.PopoverBody, { width: 300 }, /* @__PURE__ */ React11.createElement(
+    import_editor_ui5.PopoverMenuList,
     {
-      onSelect: (value) => onNavigate(+value),
+      onSelect: handleSelect,
       items: cssClassUsageRecords,
       onClose: () => {
       },
       menuListTemplate: StyledCssClassUsageItem,
-      menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ React9.createElement(import_ui7.Stack, { flexDirection: "row", flex: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui7.Box, { display: "flex", sx: { pr: 1 } }, /* @__PURE__ */ React9.createElement(
-        import_ui7.Tooltip,
+      menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", flex: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { display: "flex", sx: { pr: 1 } }, /* @__PURE__ */ React11.createElement(
+        import_ui8.Tooltip,
         {
           disableInteractive: true,
           title: iconMapper?.[cssClassUsageRecord.docType]?.label ?? cssClassUsageRecord.docType,
           placement: "top"
         },
-        /* @__PURE__ */ React9.createElement(import_ui7.Icon, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ React9.createElement(import_icons5.PagesIcon, { fontSize: "inherit" }))
-      )), /* @__PURE__ */ React9.createElement(import_ui7.Box, { sx: { pr: 0.5, maxWidth: "173px" }, display: "flex" }, /* @__PURE__ */ React9.createElement(
-        import_editor_ui3.EllipsisWithTooltip,
+        /* @__PURE__ */ React11.createElement(import_ui8.Icon, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ React11.createElement(import_icons6.PagesIcon, { fontSize: "inherit" }))
+      )), /* @__PURE__ */ React11.createElement(import_ui8.Box, { sx: { pr: 0.5, maxWidth: "173px" }, display: "flex" }, /* @__PURE__ */ React11.createElement(
+        import_editor_ui5.EllipsisWithTooltip,
         {
           title: cssClassUsageRecord.label,
-          as: import_ui7.Typography,
+          as: import_ui8.Typography,
           variant: "caption",
           maxWidth: "173px",
           sx: {
             lineHeight: 1
           }
         }
-      )), /* @__PURE__ */ React9.createElement(import_icons5.ExternalLinkIcon, { className: "hover-only-icon", fontSize: "tiny" }), /* @__PURE__ */ React9.createElement(
-        import_ui7.Chip,
+      )), /* @__PURE__ */ React11.createElement(import_icons6.ExternalLinkIcon, { className: "hover-only-icon", fontSize: "tiny" }), /* @__PURE__ */ React11.createElement(
+        import_ui8.Chip,
         {
           sx: {
             ml: "auto"
@@ -1025,7 +1342,7 @@ var CssClassUsagePopover = ({
     }
   )));
 };
-var StyledCssClassUsageItem = (0, import_ui7.styled)(import_ui7.MenuList)(({ theme }) => ({
+var StyledCssClassUsageItem = (0, import_ui8.styled)(import_ui8.MenuList)(({ theme }) => ({
   "& > li": {
     display: "flex",
     cursor: "pointer",
@@ -1059,37 +1376,49 @@ var StyledCssClassUsageItem = (0, import_ui7.styled)(import_ui7.MenuList)(({ the
 }));
 
 // src/components/css-class-usage/components/css-class-usage-trigger.tsx
-var React10 = __toESM(require("react"));
-var import_editor_ui4 = require("@elementor/editor-ui");
-var import_icons6 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var React12 = __toESM(require("react"));
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_icons7 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const {
     data: { total },
     isLoading
   } = useCssClassUsageByID(id2);
-  const cssClassUsagePopover = (0, import_ui8.usePopupState)({ variant: "popover", popupId: "css-class-usage-popover" });
+  const cssClassUsagePopover = (0, import_ui9.usePopupState)({ variant: "popover", popupId: "css-class-usage-popover" });
   if (isLoading) {
     return null;
   }
   const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.Box, { position: "relative" }, /* @__PURE__ */ React10.createElement(WrapperComponent, { total }, /* @__PURE__ */ React10.createElement(
+  const handleMouseEnter = () => {
+    trackGlobalClasses({
+      event: "classUsageHovered",
+      classId: id2,
+      usage: total
+    });
+  };
+  const handleClick = (e) => {
+    if (total !== 0) {
+      (0, import_ui9.bindTrigger)(cssClassUsagePopover).onClick(e);
+      onClick(id2);
+      trackGlobalClasses({
+        event: "classUsageClicked",
+        classId: id2
+      });
+    }
+  };
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui9.Box, { position: "relative", onMouseEnter: handleMouseEnter }, /* @__PURE__ */ React12.createElement(WrapperComponent, { total }, /* @__PURE__ */ React12.createElement(
     CustomIconButton2,
     {
       disabled: total === 0,
       size: "tiny",
-      ...(0, import_ui8.bindTrigger)(cssClassUsagePopover),
-      onClick: (e) => {
-        if (total !== 0) {
-          (0, import_ui8.bindTrigger)(cssClassUsagePopover).onClick(e);
-          onClick(id2);
-        }
-      }
+      ...(0, import_ui9.bindTrigger)(cssClassUsagePopover),
+      onClick: handleClick
     },
-    /* @__PURE__ */ React10.createElement(import_icons6.CurrentLocationIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React10.createElement(import_ui8.Box, null, /* @__PURE__ */ React10.createElement(
-    import_ui8.Popover,
+    /* @__PURE__ */ React12.createElement(import_icons7.CurrentLocationIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React12.createElement(import_ui9.Box, null, /* @__PURE__ */ React12.createElement(
+    import_ui9.Popover,
     {
       anchorOrigin: {
         vertical: "center",
@@ -1099,13 +1428,13 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
         vertical: 15,
         horizontal: -50
       },
-      ...(0, import_ui8.bindPopover)(cssClassUsagePopover),
+      ...(0, import_ui9.bindPopover)(cssClassUsagePopover),
       onClose: () => {
-        (0, import_ui8.bindPopover)(cssClassUsagePopover).onClose();
+        (0, import_ui9.bindPopover)(cssClassUsagePopover).onClose();
         onClick("");
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement(
       CssClassUsagePopover,
       {
         onClose: cssClassUsagePopover.close,
@@ -1115,7 +1444,7 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
     )
   )));
 };
-var CustomIconButton2 = (0, import_ui8.styled)(import_ui8.IconButton)(({ theme }) => ({
+var CustomIconButton2 = (0, import_ui9.styled)(import_ui9.IconButton)(({ theme }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     // Enable hover
@@ -1127,72 +1456,72 @@ var CustomIconButton2 = (0, import_ui8.styled)(import_ui8.IconButton)(({ theme }
   height: "22px",
   width: "22px"
 }));
-var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React10.createElement(
-  import_ui8.Tooltip,
+var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React12.createElement(
+  import_ui9.Tooltip,
   {
     disableInteractive: true,
     placement: "top",
-    title: `${(0, import_i18n8.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+    title: `${(0, import_i18n9.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
       "{{locations}}",
-      total === 1 ? (0, import_i18n8.__)("location", "elementor") : (0, import_i18n8.__)("locations", "elementor")
+      total === 1 ? (0, import_i18n9.__)("location", "elementor") : (0, import_i18n9.__)("locations", "elementor")
     )}`
   },
-  /* @__PURE__ */ React10.createElement("span", null, children)
+  /* @__PURE__ */ React12.createElement("span", null, children)
 );
-var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React10.createElement(
-  import_ui8.Infotip,
+var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
+  import_ui9.Infotip,
   {
     disableInteractive: true,
     placement: "top",
     color: "secondary",
-    content: /* @__PURE__ */ React10.createElement(import_editor_ui4.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n8.__)("This class isn\u2019t being used yet.", "elementor"))
+    content: /* @__PURE__ */ React12.createElement(import_editor_ui6.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n9.__)("This class isn\u2019t being used yet.", "elementor"))
   },
-  /* @__PURE__ */ React10.createElement("span", null, children)
+  /* @__PURE__ */ React12.createElement("span", null, children)
 );
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
-var React11 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react5 = require("react");
-var import_icons7 = require("@elementor/icons");
-var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_icons8 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
 var context = (0, import_react5.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react5.useState)(null);
-  const openDialog = (props) => {
+  const openDialog2 = (props) => {
     setDialogProps(props);
   };
-  const closeDialog = () => {
+  const closeDialog2 = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React11.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React11.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React13.createElement(context.Provider, { value: { openDialog: openDialog2, closeDialog: closeDialog2, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React13.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
-  const { closeDialog } = useDeleteConfirmation();
+  const { closeDialog: closeDialog2 } = useDeleteConfirmation();
   const {
     data: { total, content }
   } = useCssClassUsageByID(id2);
   const onConfirm = () => {
+    closeDialog2();
     deleteClass(id2);
-    closeDialog();
   };
-  const text = total && content.length ? (0, import_i18n9.__)(
+  const text = total && content.length ? (0, import_i18n10.__)(
     "Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.",
     "elementor"
-  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, import_i18n9.__)(
+  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, import_i18n10.__)(
     "Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
   );
-  return /* @__PURE__ */ React11.createElement(import_ui9.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React11.createElement(import_ui9.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React11.createElement(import_icons7.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n9.__)("Delete this class?", "elementor")), /* @__PURE__ */ React11.createElement(import_ui9.DialogContent, null, /* @__PURE__ */ React11.createElement(import_ui9.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)("Deleting", "elementor"), /* @__PURE__ */ React11.createElement(import_ui9.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React11.createElement(import_ui9.DialogActions, null, /* @__PURE__ */ React11.createElement(import_ui9.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Not now", "elementor")), /* @__PURE__ */ React11.createElement(
-    import_ui9.Button,
+  return /* @__PURE__ */ React13.createElement(import_ui10.Dialog, { open: true, onClose: closeDialog2, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(import_ui10.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React13.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n10.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_ui10.DialogContent, null, /* @__PURE__ */ React13.createElement(import_ui10.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n10.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_ui10.DialogActions, null, /* @__PURE__ */ React13.createElement(import_ui10.Button, { color: "secondary", onClick: closeDialog2 }, (0, import_i18n10.__)("Not now", "elementor")), /* @__PURE__ */ React13.createElement(
+    import_ui10.Button,
     {
       autoFocus: true,
       variant: "contained",
       color: "error",
       onClick: onConfirm
     },
-    (0, import_i18n9.__)("Delete", "elementor")
+    (0, import_i18n10.__)("Delete", "elementor")
   )));
 };
 var useDeleteConfirmation = () => {
@@ -1204,14 +1533,14 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-var React12 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React12.createElement(import_ui10.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React12.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React12.createElement(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
+var React14 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(import_ui11.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(import_icons9.GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(
-    import_ui10.UnstableSortableItem,
+  return /* @__PURE__ */ React14.createElement(
+    import_ui11.UnstableSortableItem,
     {
       ...props,
       id: id2,
@@ -1226,8 +1555,8 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragOverlay,
         isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React12.createElement(
-          import_ui10.Box,
+        return /* @__PURE__ */ React14.createElement(
+          import_ui11.Box,
           {
             ...itemProps,
             style: itemStyle,
@@ -1245,20 +1574,20 @@ var SortableItem = ({ children, id: id2, ...props }) => {
             triggerStyle,
             isDragPlaceholder
           }),
-          showDropIndication && /* @__PURE__ */ React12.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+          showDropIndication && /* @__PURE__ */ React14.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
   );
 };
-var StyledSortableTrigger = (0, import_ui10.styled)("div")(({ theme }) => ({
+var StyledSortableTrigger = (0, import_ui11.styled)("div")(({ theme }) => ({
   position: "absolute",
   left: 0,
   top: "50%",
   transform: `translate( -${theme.spacing(1.5)}, -50% )`,
   color: theme.palette.action.active
 }));
-var SortableItemIndicator = (0, import_ui10.styled)(import_ui10.Box)`
+var SortableItemIndicator = (0, import_ui11.styled)(import_ui11.Box)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
@@ -1281,20 +1610,20 @@ var ClassItem = ({
     isEditing,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui5.useEditable)({
+  } = (0, import_editor_ui7.useEditable)({
     value: label,
     onSubmit: renameClass,
     validation: validateLabel
   });
   const [selectedCssUsage, setSelectedCssUsage] = (0, import_react6.useState)("");
-  const { openDialog } = useDeleteConfirmation();
-  const popupState = (0, import_ui11.usePopupState)({
+  const { openDialog: openDialog2 } = useDeleteConfirmation();
+  const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
   const isSelected = (selectedCssUsage === id2 || selected || popupState.isOpen) && !disabled;
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_ui11.Stack, { p: 0 }, /* @__PURE__ */ React13.createElement(
-    import_editor_ui5.WarningInfotip,
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui12.Stack, { p: 0 }, /* @__PURE__ */ React15.createElement(
+    import_editor_ui7.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -1302,7 +1631,7 @@ var ClassItem = ({
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       StyledListItemButton,
       {
         ref: itemRef,
@@ -1316,31 +1645,31 @@ var ClassItem = ({
         disabled,
         focusVisibleClassName: "visible-class-item"
       },
-      /* @__PURE__ */ React13.createElement(SortableTrigger, { ...sortableTriggerProps }),
-      /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React13.createElement(
-        import_editor_ui5.EditableField,
+      /* @__PURE__ */ React15.createElement(SortableTrigger, { ...sortableTriggerProps }),
+      /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React15.createElement(
+        import_editor_ui7.EditableField,
         {
           ref: editableRef,
-          as: import_ui11.Typography,
+          as: import_ui12.Typography,
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React13.createElement(import_editor_ui5.EllipsisWithTooltip, { title: label, as: import_ui11.Typography, variant: "caption" })),
-      /* @__PURE__ */ React13.createElement(import_ui11.Box, { className: "class-item-locator" }, /* @__PURE__ */ React13.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
-      /* @__PURE__ */ React13.createElement(
-        import_ui11.Tooltip,
+      ) : /* @__PURE__ */ React15.createElement(import_editor_ui7.EllipsisWithTooltip, { title: label, as: import_ui12.Typography, variant: "caption" })),
+      /* @__PURE__ */ React15.createElement(import_ui12.Box, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
+      /* @__PURE__ */ React15.createElement(
+        import_ui12.Tooltip,
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n10.__)("More actions", "elementor")
+          title: (0, import_i18n11.__)("More actions", "elementor")
         },
-        /* @__PURE__ */ React13.createElement(import_ui11.IconButton, { size: "tiny", ...(0, import_ui11.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
+        /* @__PURE__ */ React15.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons10.DotsVerticalIcon, { fontSize: "tiny" }))
       )
     )
-  )), /* @__PURE__ */ React13.createElement(
-    import_ui11.Menu,
+  )), /* @__PURE__ */ React15.createElement(
+    import_ui12.Menu,
     {
-      ...(0, import_ui11.bindMenu)(popupState),
+      ...(0, import_ui12.bindMenu)(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -1350,8 +1679,8 @@ var ClassItem = ({
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React13.createElement(
-      import_editor_ui5.MenuListItem,
+    /* @__PURE__ */ React15.createElement(
+      import_editor_ui7.MenuListItem,
       {
         sx: { minWidth: "160px" },
         onClick: () => {
@@ -1359,21 +1688,21 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React13.createElement(import_ui11.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n10.__)("Rename", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
     ),
-    /* @__PURE__ */ React13.createElement(
-      import_editor_ui5.MenuListItem,
+    /* @__PURE__ */ React15.createElement(
+      import_editor_ui7.MenuListItem,
       {
         onClick: () => {
           popupState.close();
-          openDialog({ id: id2, label });
+          openDialog2({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React13.createElement(import_ui11.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n10.__)("Delete", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n11.__)("Delete", "elementor"))
     )
   ));
 };
-var StyledListItemButton = (0, import_ui11.styled)(import_ui11.ListItemButton, {
+var StyledListItemButton = (0, import_ui12.styled)(import_ui12.ListItemButton, {
   shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop)
 })(
   ({ showActions, showSortIndicator }) => `
@@ -1402,7 +1731,7 @@ var StyledListItemButton = (0, import_ui11.styled)(import_ui11.ListItemButton, {
     }
   `
 );
-var Indicator = (0, import_ui11.styled)(import_ui11.Box, {
+var Indicator = (0, import_ui12.styled)(import_ui12.Box, {
   shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
 })(({ theme, isActive, isError }) => ({
   display: "flex",
@@ -1432,10 +1761,10 @@ var validateLabel = (newLabel) => {
 };
 
 // src/components/class-manager/not-found.tsx
-var React14 = __toESM(require("react"));
-var import_icons10 = require("@elementor/icons");
-var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var React16 = __toESM(require("react"));
+var import_icons11 = require("@elementor/icons");
+var import_ui13 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 var getNotFoundType = (searchValue, filters, filteredClasses) => {
   const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
   const filterNotFound = filters && filters.length === 0;
@@ -1453,19 +1782,19 @@ var getNotFoundType = (searchValue, filters, filteredClasses) => {
 };
 var notFound = {
   filterAndSearch: {
-    mainText: (0, import_i18n11.__)("Sorry, nothing matched.", "elementor"),
-    sceneryText: (0, import_i18n11.__)("Try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
+    mainText: (0, import_i18n12.__)("Sorry, nothing matched.", "elementor"),
+    sceneryText: (0, import_i18n12.__)("Try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(import_icons11.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
-    mainText: (0, import_i18n11.__)("Sorry, nothing matched", "elementor"),
-    sceneryText: (0, import_i18n11.__)("Clear your input and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
+    mainText: (0, import_i18n12.__)("Sorry, nothing matched", "elementor"),
+    sceneryText: (0, import_i18n12.__)("Clear your input and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(import_icons11.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
-    mainText: (0, import_i18n11.__)("Sorry, nothing matched that search.", "elementor"),
-    sceneryText: (0, import_i18n11.__)("Clear the filters and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(import_icons10.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
+    mainText: (0, import_i18n12.__)("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: (0, import_i18n12.__)("Clear the filters and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(import_icons11.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
   }
 };
 var NotFound = ({ notFoundType }) => {
@@ -1475,11 +1804,11 @@ var NotFound = ({ notFoundType }) => {
   } = useSearchAndFilters();
   switch (notFoundType) {
     case "filter":
-      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.filter, onClear: onClearFilter });
+      return /* @__PURE__ */ React16.createElement(NotFoundLayout, { ...notFound.filter, onClear: onClearFilter });
     case "search":
-      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.search, searchValue: inputValue, onClear: onClearSearch });
+      return /* @__PURE__ */ React16.createElement(NotFoundLayout, { ...notFound.search, searchValue: inputValue, onClear: onClearSearch });
     case "filterAndSearch":
-      return /* @__PURE__ */ React14.createElement(
+      return /* @__PURE__ */ React16.createElement(
         NotFoundLayout,
         {
           ...notFound.filterAndSearch,
@@ -1491,8 +1820,8 @@ var NotFound = ({ notFoundType }) => {
       );
   }
 };
-var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ React14.createElement(
-  import_ui12.Stack,
+var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ React16.createElement(
+  import_ui13.Stack,
   {
     color: "text.secondary",
     pt: 5,
@@ -1502,16 +1831,16 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
     justifySelf: "center"
   },
   icon,
-  /* @__PURE__ */ React14.createElement(
-    import_ui12.Box,
+  /* @__PURE__ */ React16.createElement(
+    import_ui13.Box,
     {
       sx: {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, mainText),
-    searchValue && /* @__PURE__ */ React14.createElement(
-      import_ui12.Typography,
+    /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, mainText),
+    searchValue && /* @__PURE__ */ React16.createElement(
+      import_ui13.Typography,
       {
         variant: "subtitle2",
         color: "inherit",
@@ -1521,8 +1850,8 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React14.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React16.createElement(
         "span",
         {
           style: {
@@ -1533,11 +1862,11 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
         },
         searchValue
       ),
-      /* @__PURE__ */ React14.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
     )
   ),
-  /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
-  /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React14.createElement(import_ui12.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
+  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui13.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
 );
 
 // src/components/class-manager/global-classes-list.tsx
@@ -1546,9 +1875,11 @@ var GlobalClassesList = ({ disabled }) => {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch5 = (0, import_store16.__useDispatch)();
+  const dispatch5 = (0, import_store18.__useDispatch)();
   const filters = useFilters();
-  const [classesOrder, reorderClasses] = useReorder();
+  const [draggedItemId, setDraggedItemId] = React17.useState(null);
+  const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
+  const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
   (0, import_react7.useEffect)(() => {
     const handler = (event) => {
@@ -1568,58 +1899,81 @@ var GlobalClassesList = ({ disabled }) => {
     return () => window.removeEventListener("keydown", handler);
   }, [dispatch5]);
   if (!cssClasses?.length) {
-    return /* @__PURE__ */ React15.createElement(EmptyState, null);
+    return /* @__PURE__ */ React17.createElement(EmptyState, null);
   }
   const notFoundType = getNotFoundType(searchValue, filters, filteredCssClasses);
   if (notFoundType) {
-    return /* @__PURE__ */ React15.createElement(NotFound, { notFoundType });
+    return /* @__PURE__ */ React17.createElement(NotFound, { notFoundType });
   }
   const isFiltersApplied = filters?.length || searchValue;
   const allowSorting = filteredCssClasses.length > 1 && !isFiltersApplied;
-  return /* @__PURE__ */ React15.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React15.createElement(import_ui13.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
     SortableProvider,
     {
       value: classesOrder,
       onChange: reorderClasses,
       disableDragOverlay: !allowSorting
     },
-    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React15.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React15.createElement(
-      ClassItem,
-      {
-        id: id2,
-        label,
-        renameClass: (newLabel) => {
-          dispatch5(
-            slice.actions.update({
-              style: {
-                id: id2,
-                label: newLabel
-              }
-            })
-          );
-        },
-        selected: isDragged,
-        disabled: disabled || isDragPlaceholder,
-        sortableTriggerProps: { ...triggerProps, style: triggerStyle },
-        showSortIndicator: allowSorting
+    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React17.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
+      if (isDragged && !draggedItemId) {
+        setDraggedItemId(id2);
       }
-    )))
+      return /* @__PURE__ */ React17.createElement(
+        ClassItem,
+        {
+          id: id2,
+          label,
+          renameClass: (newLabel) => {
+            trackGlobalClasses({
+              event: "classRenamed",
+              classId: id2,
+              oldValue: label,
+              newValue: newLabel,
+              source: "class-manager"
+            });
+            dispatch5(
+              slice.actions.update({
+                style: {
+                  id: id2,
+                  label: newLabel
+                }
+              })
+            );
+          },
+          selected: isDragged,
+          disabled: disabled || isDragPlaceholder,
+          sortableTriggerProps: {
+            ...triggerProps,
+            style: triggerStyle
+          },
+          showSortIndicator: allowSorting
+        }
+      );
+    }))
   )));
 };
-var EmptyState = () => /* @__PURE__ */ React15.createElement(import_ui13.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React15.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React15.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n12.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React15.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n12.__)(
+var EmptyState = () => /* @__PURE__ */ React17.createElement(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n13.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n13.__)(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
   "elementor"
 )));
-var StyledHeader = (0, import_ui13.styled)(import_ui13.Typography)(({ theme, variant }) => ({
+var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, variant }) => ({
   "&.MuiTypography-root": {
     ...theme.typography[variant]
   }
 }));
-var useReorder = () => {
-  const dispatch5 = (0, import_store16.__useDispatch)();
+var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
+  const dispatch5 = (0, import_store18.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
     dispatch5(slice.actions.setOrder(newIds));
+    if (draggedItemId) {
+      trackGlobalClasses({
+        event: "classManagerReorder",
+        classId: draggedItemId,
+        classTitle: draggedItemLabel
+      });
+      setDraggedItemId(null);
+    }
   };
   return [order, reorder];
 };
@@ -1660,37 +2014,6 @@ function unblockPanelInteractions() {
   extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
 }
 
-// src/components/class-manager/save-changes-dialog.tsx
-var React16 = __toESM(require("react"));
-var import_react8 = require("react");
-var import_icons11 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
-var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(import_ui14.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React16.createElement(import_ui14.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React16.createElement(import_icons11.AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React16.createElement(import_ui14.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React16.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
-var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react8.useState)(false);
-  const { cancel, confirm, discard } = actions;
-  const onConfirm = async () => {
-    setIsConfirming(true);
-    await confirm.action();
-    setIsConfirming(false);
-  };
-  return /* @__PURE__ */ React16.createElement(import_ui14.DialogActions, null, cancel && /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
-};
-SaveChangesDialog.Title = SaveChangesDialogTitle;
-SaveChangesDialog.Content = SaveChangesDialogContent;
-SaveChangesDialog.ContentText = SaveChangesDialogContentText;
-SaveChangesDialog.Actions = SaveChangesDialogActions;
-var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-  return { isOpen, open, close };
-};
-
 // src/components/class-manager/class-manager-panel.tsx
 var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
@@ -1704,19 +2027,20 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   onClose: () => {
     (0, import_editor_v1_adapters3.changeEditMode)("edit");
     unblockPanelInteractions();
-  }
+  },
+  isOpenPreviousElement: true
 });
 function ClassManagerPanel() {
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui8.useDialog)();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   usePreventUnload();
-  return /* @__PURE__ */ React17.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React17.createElement(import_ui15.ErrorBoundary, { fallback: /* @__PURE__ */ React17.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React17.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React17.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React17.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React17.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n13.__)("Class Manager", "elementor")), /* @__PURE__ */ React17.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(import_editor_ui8.ThemeProvider, null, /* @__PURE__ */ React18.createElement(import_ui15.ErrorBoundary, { fallback: /* @__PURE__ */ React18.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React18.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React18.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -1729,7 +2053,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1738,9 +2062,9 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React17.createElement(import_ui15.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React17.createElement(import_ui15.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React17.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React17.createElement(CssClassFilter, null)), /* @__PURE__ */ React17.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React17.createElement(import_ui15.Divider, null),
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement(import_ui15.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React18.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React18.createElement(CssClassFilter, null)), /* @__PURE__ */ React18.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React18.createElement(import_ui15.Divider, null),
+    /* @__PURE__ */ React18.createElement(
       import_ui15.Box,
       {
         px: 2,
@@ -1749,9 +2073,9 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React17.createElement(GlobalClassesList, { disabled: isPublishing })
+      /* @__PURE__ */ React18.createElement(GlobalClassesList, { disabled: isPublishing })
     )
-  ), /* @__PURE__ */ React17.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React18.createElement(
     import_ui15.Button,
     {
       fullWidth: true,
@@ -1762,19 +2086,19 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n13.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React17.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React17.createElement(SaveChangesDialog, null, /* @__PURE__ */ React17.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React17.createElement(SaveChangesDialog.Title, null, (0, import_i18n13.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React17.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n13.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n13.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React17.createElement(
-    SaveChangesDialog.Actions,
+    (0, import_i18n14.__)("Save changes", "elementor")
+  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui8.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
+    import_editor_ui8.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n13.__)("Discard", "elementor"),
+          label: (0, import_i18n14.__)("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n13.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -1785,11 +2109,11 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React17.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React17.createElement(import_icons12.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React17.createElement(import_ui15.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React17.createElement(import_ui15.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React17.createElement("strong", null, (0, import_i18n13.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React18.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React18.createElement(import_icons12.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React18.createElement(import_ui15.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React18.createElement(import_ui15.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -1815,7 +2139,7 @@ var usePublish = () => {
 var TotalCssClassCounter = () => {
   const filters = useFilters();
   const cssClasses = useClassesOrder();
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     import_ui15.Chip,
     {
       size: "small",
@@ -1825,11 +2149,17 @@ var TotalCssClassCounter = () => {
 };
 
 // src/components/class-manager/class-manager-button.tsx
+var trackGlobalClassesButton = () => {
+  trackGlobalClasses({
+    event: "classManagerOpened",
+    source: "style-panel"
+  });
+};
 var ClassManagerButton = () => {
   const document = (0, import_editor_documents5.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
@@ -1842,25 +2172,31 @@ var ClassManagerButton = () => {
       return;
     }
     openPanel();
+    trackGlobalClassesButton();
+    trackGlobalClasses({
+      event: "classManagerOpened",
+      source: "style-panel"
+    });
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(import_ui16.Tooltip, { title: (0, import_i18n14.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React18.createElement(import_ui16.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React18.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n14.__)(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { title: (0, import_i18n15.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n15.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React18.createElement(
-    SaveChangesDialog.Actions,
+  ))), /* @__PURE__ */ React19.createElement(
+    import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n14.__)("Stay here", "elementor"),
+          label: (0, import_i18n15.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n15.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
             openPanel();
+            trackGlobalClassesButton();
             prefetchClassesUsage();
           }
         }
@@ -1870,11 +2206,11 @@ var ClassManagerButton = () => {
 };
 
 // src/components/convert-local-class-to-global-class.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_ui7 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui17 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_i18n16 = require("@wordpress/i18n");
 var ConvertLocalClassToGlobalClass = (props) => {
   const localStyleData = props.styleDef;
   const handleConversion = () => {
@@ -1885,10 +2221,16 @@ var ConvertLocalClassToGlobalClass = (props) => {
     const newId = globalClassesStylesProvider.actions.create?.(newClassName, localStyleData.variants);
     if (newId) {
       props.successCallback(newId);
+      trackGlobalClasses({
+        classId: newId,
+        event: "classCreated",
+        source: "converted",
+        classTitle: newClassName
+      });
     }
   };
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
-    import_editor_ui7.MenuListItem,
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    import_editor_ui10.MenuListItem,
     {
       disabled: !props.canConvert,
       onClick: handleConversion,
@@ -1901,8 +2243,8 @@ var ConvertLocalClassToGlobalClass = (props) => {
         }
       }
     },
-    (0, import_i18n15.__)("Convert to global class", "elementor")
-  ), /* @__PURE__ */ React19.createElement(import_ui17.Divider, null));
+    (0, import_i18n16.__)("Convert to global class", "elementor")
+  ), /* @__PURE__ */ React20.createElement(import_ui17.Divider, null));
 };
 function createClassName(prefix) {
   let i = 1;
@@ -1914,11 +2256,11 @@ function createClassName(prefix) {
 }
 
 // src/components/populate-store.tsx
-var import_react10 = require("react");
-var import_store20 = require("@elementor/store");
+var import_react9 = require("react");
+var import_store22 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch5 = (0, import_store20.__useDispatch)();
-  (0, import_react10.useEffect)(() => {
+  const dispatch5 = (0, import_store22.__useDispatch)();
+  (0, import_react9.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -1941,64 +2283,292 @@ function PopulateStore() {
   return null;
 }
 
+// src/mcp-integration/index.ts
+var import_editor_mcp2 = require("@elementor/editor-mcp");
+
+// src/mcp-integration/classes-resource.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+var GLOBAL_CLASSES_URI = "elementor://classes";
+var initClassesResource = () => {
+  const { mcpServer } = (0, import_editor_mcp.getMCPByDomain)("classes");
+  mcpServer.resource(
+    "global-classes",
+    GLOBAL_CLASSES_URI,
+    {
+      description: "Global classes list."
+    },
+    async () => {
+      return {
+        contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage["elementor-global-classes"] ?? {} }]
+      };
+    }
+  );
+};
+
+// src/mcp-integration/mcp-apply-unapply-global-classes.ts
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_schema = require("@elementor/schema");
+function initMcpApplyUnapplyGlobalClasses(server) {
+  server.addTool({
+    name: "list-all-global-classes",
+    description: `List all classes applied to a specific element
+
+## When to use this tool:
+- When a user requests to see which classes or global classes exists.
+- When you need the list of global classes to allow the user to select from.
+- At least once before applying or unapplying a class, to ensure the class ID is correct.
+
+`,
+    outputSchema: {
+      appliedClasses: import_schema.z.array(
+        import_schema.z.object({
+          id: import_schema.z.string().describe("The ID of the class"),
+          label: import_schema.z.string().describe("The label of the class"),
+          variants: import_schema.z.array(
+            import_schema.z.object({
+              meta: import_schema.z.object({
+                breakpoint: import_schema.z.string().optional(),
+                state: import_schema.z.string().optional()
+              }),
+              props: import_schema.z.record(import_schema.z.any())
+            })
+          )
+        })
+      )
+    },
+    handler: async () => {
+      const globalClassesProvider = import_editor_styles_repository5.stylesRepository.getProviderByKey("global-classes");
+      if (!globalClassesProvider) {
+        throw new Error("Global classes provider not found");
+      }
+      const result = [];
+      globalClassesProvider.actions.all().forEach((style) => {
+        const { id: id2, label, variants } = style;
+        result.push({
+          id: id2,
+          label,
+          variants: variants.map((variant) => ({
+            meta: {
+              breakpoint: variant.meta.breakpoint,
+              state: variant.meta.state
+            },
+            props: variant.props
+          }))
+        });
+      });
+      return { appliedClasses: result };
+    }
+  });
+  server.addTool({
+    schema: {
+      classId: import_schema.z.string().describe("The ID of the class to apply"),
+      elementId: import_schema.z.string().describe("The ID of the element to which the class will be applied")
+    },
+    name: "apply-global-class",
+    description: `Apply a global class to the current element
+
+## When to use this tool:
+- When a user requests to apply a global class or a class to an element in the Elementor editor.
+- When you need to add a specific class to an element's applied classes.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates. You can use the "list-applied-classes" tool to fetch the current classes.
+- Make sure you have the correct class ID that you want to apply.`,
+    handler: async (params) => {
+      const { classId, elementId } = params;
+      const appliedClasses = (0, import_editor_editing_panel.doGetAppliedClasses)(elementId);
+      (0, import_editor_editing_panel.doApplyClasses)(elementId, [...appliedClasses, classId]);
+      return `Class ${classId} applied to element ${elementId} successfully.`;
+    }
+  });
+  server.addTool({
+    name: "unapply-global-class",
+    schema: {
+      classId: import_schema.z.string().describe("The ID of the class to unapply"),
+      elementId: import_schema.z.string().describe("The ID of the element from which the class will be unapplied")
+    },
+    description: `Unapply a (global) class from the current element
+
+## When to use this tool:
+- When a user requests to unapply a global class or a class from an element in the Elementor editor.
+- When you need to remove a specific class from an element's applied classes.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of classes applied to the element to avoid errors. You can use the "list-global-classes" tool to fetch the all classes applied to all elements.
+- Make sure you have the correct class ID that you want to unapply.
+
+<note>
+If the user want to unapply a class by it's name and not ID, please use the "list-global-classes" tool to get the class ID from the name first.
+</note>
+`,
+    handler: async (params) => {
+      const { classId, elementId } = params;
+      const ok = (0, import_editor_editing_panel.doUnapplyClass)(elementId, classId);
+      if (!ok) {
+        throw new Error(`Class ${classId} is not applied to element ${elementId}, cannot unapply it.`);
+      }
+      return `Class ${classId} unapplied from element ${elementId} successfully.`;
+    }
+  });
+}
+
+// src/mcp-integration/mcp-get-global-class-usages.ts
+var import_schema2 = require("@elementor/schema");
+function initMcpApplyGetGlobalClassUsages(reg) {
+  const { addTool } = reg;
+  const globalClassesUsageSchema = {
+    usages: import_schema2.z.array(
+      import_schema2.z.object({
+        classId: import_schema2.z.string().describe(
+          'The ID of the class, not visible to the user. To retreive the name of the class, use the "list-global-classes" tool'
+        ),
+        usages: import_schema2.z.array(
+          import_schema2.z.object({
+            pageId: import_schema2.z.string().describe("The ID of the page where the class is used"),
+            title: import_schema2.z.string().describe("The title of the page where the class is used"),
+            total: import_schema2.z.number().describe("The number of times the class is used on this page"),
+            elements: import_schema2.z.array(import_schema2.z.string()).describe("List of element IDs using this class on the page")
+          })
+        )
+      })
+    )
+  };
+  addTool({
+    name: "get-global-class-usages",
+    description: `Retreive the usage details of global classes within the Elementor editor, accross all pages.
+
+## Prequisites:
+- Use "list-global-classes" tool to be able to match class IDs to class names/labels.
+
+## When to use this tool:
+- When a user requests to see where a specific global class is being used accross the site.
+- When you need to manage or clean up unused global classes.
+- Before deleting a global class, to ensure it is not in use in any other pages.
+`,
+    outputSchema: globalClassesUsageSchema,
+    handler: async () => {
+      const data = await fetchCssClassUsage();
+      const result = {
+        usages: []
+      };
+      Object.entries(data).forEach(
+        ([classId, usageDetails]) => {
+          const newEntry = {
+            classId,
+            usages: []
+          };
+          if (typeof usageDetails !== "number") {
+            const { content } = usageDetails;
+            content.forEach((detail) => {
+              newEntry.usages.push({
+                pageId: String(detail.pageId),
+                title: detail.title,
+                total: detail.total,
+                elements: detail.elements
+              });
+            });
+            result.usages.push(newEntry);
+          }
+        }
+      );
+      return result;
+    }
+  });
+}
+
+// src/mcp-integration/index.ts
+var initMcpIntegration = () => {
+  const reg = (0, import_editor_mcp2.getMCPByDomain)("classes");
+  reg.setMCPDescription(
+    "Tools for managing and applying Global CSS classes to elements within the Elementor editor."
+  );
+  initMcpApplyUnapplyGlobalClasses(reg);
+  initMcpApplyGetGlobalClassUsages(reg);
+  initClassesResource();
+};
+
+// src/sync-with-document.tsx
+var import_react10 = require("react");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+
 // src/sync-with-document-save.ts
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store22 = require("@elementor/store");
-function syncWithDocumentSave() {
+var import_store24 = require("@elementor/store");
+function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
-  bindSaveAction();
+  bindSaveAction(panelActions);
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store22.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store24.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
     (0, import_editor_documents6.setDocumentModifiedStatus)(true);
   });
 }
-function bindSaveAction() {
-  (0, import_editor_v1_adapters4.registerDataHook)("after", "document/save/save", (args) => {
+function bindSaveAction(panelActions) {
+  (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
     const user = (0, import_editor_current_user2.getCurrentUser)();
     const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
     if (!canEdit) {
-      return;
+      return true;
     }
-    return saveGlobalClasses({
-      context: args.status === "publish" ? "frontend" : "preview"
+    saveGlobalClasses({
+      context: args.status === "publish" ? "frontend" : "preview",
+      onApprove: panelActions?.open
     });
+    return true;
   });
 }
 function isDirty() {
-  return selectIsDirty((0, import_store22.__getState)());
+  return selectIsDirty((0, import_store24.__getState)());
+}
+
+// src/sync-with-document.tsx
+function SyncWithDocumentSave() {
+  const panelActions = usePanelActions();
+  (0, import_react10.useEffect)(() => {
+    (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
+      syncWithDocumentSave(panelActions);
+    });
+  }, []);
+  return null;
 }
 
 // src/init.ts
 function init() {
-  (0, import_store24.__registerSlice)(slice);
+  (0, import_store26.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository6.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_editing_panel.injectIntoCssClassConvert)({
+  (0, import_editor.injectIntoLogic)({
+    id: "global-classes-sync-with-document",
+    component: SyncWithDocumentSave
+  });
+  (0, import_editor.injectIntoLogic)({
+    id: "global-classes-prefetch-css-class-usage",
+    component: PrefetchCssClassUsage
+  });
+  (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
   });
-  (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
+  (0, import_editor_editing_panel2.injectIntoClassSelectorActions)({
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_editing_panel.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
+  (0, import_editor_editing_panel2.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
     name: "global",
     getThemeColor: (theme) => theme.palette.global.dark
   });
-  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
-    syncWithDocumentSave();
-  });
+  initMcpIntegration();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {