@elementor/editor-global-classes 4.1.0-825 → 4.1.0-827

package/dist/index.mjs

@@ -1,30 +1,45 @@
-// src/global-classes-styles-provider.ts
+// src/components/class-manager/class-manager-panel.tsx
+import * as React19 from "react";
+import { useCallback, useEffect as useEffect4, useMemo as useMemo4, useState as useState7 } from "react";
+import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
+import { reloadCurrentDocument, setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
-  generateId
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { XIcon } from "@elementor/icons";
+import { useMutation } from "@elementor/query";
+import { __dispatch as dispatch3 } from "@elementor/store";
+import {
+  Alert as Alert2,
+  Box as Box11,
+  Button as Button3,
+  Chip as Chip4,
+  DialogHeader as DialogHeader2,
+  Divider as Divider4,
+  ErrorBoundary,
+  IconButton as IconButton4,
+  Stack as Stack9
+} from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+
+// src/hooks/use-classes-order.ts
+import { __useSelector as useSelector } from "@elementor/store";
+
+// src/store.ts
+import {
+  getVariantByMeta
 } from "@elementor/editor-styles";
-import { createStylesProvider } from "@elementor/editor-styles-repository";
 import {
-  __dispatch as dispatch,
-  __getState as getState2,
-  __subscribeWithSelector as subscribeWithSelector
+  __createSelector as createSelector,
+  __createSlice as createSlice
 } from "@elementor/store";
-import { __ } from "@wordpress/i18n";
-
-// src/capabilities.ts
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
-var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
-var getCapabilities = () => {
-  const shouldEnforceCapabilities = isExperimentActive(EXPERIMENT_KEY);
-  if (shouldEnforceCapabilities) {
-    return {
-      update: UPDATE_CLASS_CAPABILITY_KEY,
-      create: UPDATE_CLASS_CAPABILITY_KEY,
-      delete: UPDATE_CLASS_CAPABILITY_KEY,
-      updateProps: UPDATE_CLASS_CAPABILITY_KEY
-    };
-  }
-};
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -41,15 +56,6 @@ var GlobalClassTrackingError = createError({
   message: "Error tracking global classes event."
 });
 
-// src/store.ts
-import {
-  getVariantByMeta
-} from "@elementor/editor-styles";
-import {
-  __createSelector as createSelector,
-  __createSlice as createSlice
-} from "@elementor/store";
-
 // src/utils/snapshot-history.ts
 function createLink({ value, next, prev }) {
   return {
@@ -232,423 +238,41 @@ var slice = 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
-  );
-};
-var selectData = (state) => state[SLICE_NAME].data;
-var selectFrontendInitialData = (state) => state[SLICE_NAME].initialData.frontend;
-var selectPreviewInitialData = (state) => state[SLICE_NAME].initialData.preview;
-var selectOrder = createSelector(selectData, ({ order }) => order);
-var selectGlobalClasses = createSelector(selectData, ({ items }) => items);
-var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
-var selectOrderedClasses = createSelector(
-  selectGlobalClasses,
-  selectOrder,
-  (items, order) => order.map((id2) => items[id2])
-);
-var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
-var selectEmptyCssClass = createSelector(
-  selectData,
-  ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
-);
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/events";
-import { __getState as getState } from "@elementor/store";
-
-// src/api.ts
-import { httpService } from "@elementor/http-client";
-var RESOURCE_URL = "/global-classes";
-var BASE_URL = "elementor/v1";
-var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
-var apiClient = {
-  usage: () => httpService().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
-  all: (context2 = "preview") => httpService().get(`${BASE_URL}${RESOURCE_URL}`, {
-    params: { context: context2 }
-  }),
-  publish: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "frontend"
-    }
-  }),
-  saveDraft: (payload) => 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;
-    case "classSyncToV3PopupShown":
-      return {
-        ...payload,
-        interaction_type: "popup_shown",
-        target_type: "popup",
-        target_name: "sync_to_v3_popup",
-        interaction_result: "popup_viewed",
-        target_location: "widget_panel",
-        location_l1: "class_manager"
-      };
-    case "classSyncToV3": {
-      const classLabel = getCssClass(payload.classId).label;
-      const isSync = payload.action === "sync";
-      return {
-        ...payload,
-        interaction_type: "click",
-        target_type: classLabel,
-        target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
-        interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
-        target_location: "widget_panel",
-        location_l1: "class_manager",
-        interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
-      };
-    }
-    case "classSyncToV3PopupClick": {
-      const isSyncAction = payload.action === "sync";
-      return {
-        ...payload,
-        interaction_type: "click",
-        target_type: "button",
-        target_name: isSyncAction ? "sync_to_v3" : "cancel",
-        interaction_result: isSyncAction ? "class_is_synced" : "cancel",
-        target_location: "sync_to_v3_popup"
-      };
-    }
-    default:
-      return payload;
-  }
-};
-var track = (data) => {
-  const { dispatchEvent, config } = 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(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 = 100;
-var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
-var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
-var globalClassesStylesProvider = createStylesProvider({
-  key: GLOBAL_CLASSES_PROVIDER_KEY,
-  priority: 30,
-  limit: MAX_CLASSES,
-  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
-  labels: {
-    singular: __("class", "elementor"),
-    plural: __("classes", "elementor")
-  },
-  subscribe: (cb) => subscribeWithStates(cb),
-  capabilities: getCapabilities(),
-  actions: {
-    all: () => selectOrderedClasses(getState2()),
-    get: (id2) => selectClass(getState2(), id2),
-    resolveCssName: (id2) => {
-      return selectClass(getState2(), id2)?.label ?? id2;
-    },
-    create: (label, variants = [], id2) => {
-      const classes = selectGlobalClasses(getState2());
-      const existingLabels = Object.values(classes).map((style) => style.label);
-      if (existingLabels.includes(label)) {
-        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
-      }
-      if (!id2) {
-        id2 = generateId("g-", Object.keys(classes));
-      }
-      dispatch(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      dispatch(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      dispatch(slice.actions.delete(id2));
-    },
-    updateProps: (args) => {
-      dispatch(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props,
-          mode: args.mode
-        })
-      );
-    },
-    updateCustomCss: (args) => {
-      dispatch(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          custom_css: args.custom_css,
-          props: {}
-        })
-      );
-    },
-    tracking: (data) => {
-      trackGlobalClasses(data).catch((error) => {
-        throw new GlobalClassTrackingError({ cause: error });
-      });
-    }
-  }
-});
-var subscribeWithStates = (cb) => {
-  let previousState = selectData(getState2());
-  return subscribeWithSelector(
-    (state) => state.globalClasses,
-    (currentState) => {
-      cb(previousState.items, currentState.data.items);
-      previousState = currentState.data;
-    }
-  );
-};
-
-// src/mcp-integration/classes-resource.ts
-var GLOBAL_CLASSES_URI = "elementor://global-classes";
-var STORAGE_KEY = "elementor-global-classes";
-var updateLocalStorageCache = () => {
-  const classes = globalClassesStylesProvider.actions.all();
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
-};
-var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
-  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
-    const { sendResourceUpdated, resource, waitForReady } = entry;
-    resource(
-      "global-classes",
-      GLOBAL_CLASSES_URI,
-      {
-        description: "Global classes list."
-      },
-      async () => {
-        return {
-          contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage[STORAGE_KEY] ?? "[]" }]
-        };
-      }
-    );
-    waitForReady().then(() => {
-      updateLocalStorageCache();
-      globalClassesStylesProvider.subscribe(() => {
-        updateLocalStorageCache();
-        sendResourceUpdated({ uri: GLOBAL_CLASSES_URI });
-      });
-    });
-  });
-};
-
-// src/init.ts
-import { injectIntoLogic } from "@elementor/editor";
-import {
-  injectIntoClassSelectorActions,
-  injectIntoCssClassConvert,
-  registerStyleProviderToColors
-} from "@elementor/editor-editing-panel";
-import { getMCPByDomain } from "@elementor/editor-mcp";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __registerSlice as registerSlice } from "@elementor/store";
-
-// src/components/class-manager/class-manager-button.tsx
-import * as React20 from "react";
-import {
-  __useActiveDocument as useActiveDocument2,
-  __useActiveDocumentActions as useActiveDocumentActions
-} from "@elementor/editor-documents";
-import { useUserStylesCapability } from "@elementor/editor-styles-repository";
-import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
-import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
-
-// src/hooks/use-prefetch-css-class-usage.ts
-import { useQueryClient } from "@elementor/query";
-
-// src/components/css-class-usage/types.ts
-var QUERY_KEY = "css-classes-usage";
-
-// src/hooks/use-prefetch-css-class-usage.ts
-function usePrefetchCssClassUsage() {
-  const queryClient = useQueryClient();
-  const prefetchClassesUsage = () => queryClient.prefetchQuery({
-    queryKey: [QUERY_KEY],
-    queryFn: fetchCssClassUsage
-  });
-  return { prefetchClassesUsage };
-}
-var PrefetchCssClassUsage = () => {
-  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
-  prefetchClassesUsage();
-  return null;
-};
-
-// src/components/class-manager/class-manager-panel.tsx
-import * as React19 from "react";
-import { useCallback, useEffect as useEffect4, useState as useState7 } from "react";
-import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
-import { reloadCurrentDocument, setDocumentModifiedStatus } from "@elementor/editor-documents";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { XIcon } from "@elementor/icons";
-import { useMutation } from "@elementor/query";
-import { __dispatch as dispatch4 } from "@elementor/store";
-import {
-  Alert as Alert2,
-  Box as Box11,
-  Button as Button3,
-  Chip as Chip4,
-  DialogHeader as DialogHeader2,
-  Divider as Divider4,
-  ErrorBoundary,
-  IconButton as IconButton4,
-  Stack as Stack9
-} from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+});
+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
+  );
+};
+var selectData = (state) => state[SLICE_NAME].data;
+var selectFrontendInitialData = (state) => state[SLICE_NAME].initialData.frontend;
+var selectPreviewInitialData = (state) => state[SLICE_NAME].initialData.preview;
+var selectOrder = createSelector(selectData, ({ order }) => order);
+var selectGlobalClasses = createSelector(selectData, ({ items }) => items);
+var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
+var selectOrderedClasses = createSelector(
+  selectGlobalClasses,
+  selectOrder,
+  (items, order) => order.map((id2) => items[id2])
+);
+var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
+var selectEmptyCssClass = createSelector(
+  selectData,
+  ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
+);
 
 // src/hooks/use-classes-order.ts
-import { __useSelector as useSelector } from "@elementor/store";
 var useClassesOrder = () => {
   return useSelector(selectOrder);
 };
@@ -726,6 +350,51 @@ import { __useActiveDocument as useActiveDocument } from "@elementor/editor-docu
 
 // src/hooks/use-css-class-usage.ts
 import { useQuery } from "@elementor/query";
+
+// src/api.ts
+import { httpService } from "@elementor/http-client";
+var RESOURCE_URL = "/global-classes";
+var BASE_URL = "elementor/v1";
+var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
+var apiClient = {
+  usage: () => httpService().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
+  all: (context2 = "preview") => httpService().get(`${BASE_URL}${RESOURCE_URL}`, {
+    params: { context: context2 }
+  }),
+  publish: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "frontend"
+    }
+  }),
+  saveDraft: (payload) => 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/components/css-class-usage/types.ts
+var QUERY_KEY = "css-classes-usage";
+
+// src/hooks/use-css-class-usage.ts
 var useCssClassUsage = () => {
   return useQuery({
     queryKey: [QUERY_KEY],
@@ -818,7 +487,7 @@ var useFilters = () => {
 // src/save-global-classes.tsx
 import * as React3 from "react";
 import { openDialog } from "@elementor/editor-ui";
-import { __dispatch as dispatch2, __getState as getState3 } from "@elementor/store";
+import { __dispatch as dispatch, __getState as getState2 } from "@elementor/store";
 import { hash } from "@elementor/utils";
 
 // src/components/class-manager/duplicate-label-dialog.tsx
@@ -837,7 +506,7 @@ import {
   Stack,
   Typography
 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 var DUP_PREFIX = "DUP_";
 var DuplicateLabelDialog = ({
   modifiedLabels,
@@ -848,7 +517,7 @@ var DuplicateLabelDialog = ({
     onApprove?.();
     closeDialog();
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle1" }, __2("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2" }, __2(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle1" }, __("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2" }, __(
     "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(Box, null, /* @__PURE__ */ React2.createElement(
@@ -873,7 +542,7 @@ var DuplicateLabelDialog = ({
           minWidth: 0
         }
       },
-      __2("Before", "elementor")
+      __("Before", "elementor")
     ),
     /* @__PURE__ */ React2.createElement(
       Typography,
@@ -888,7 +557,7 @@ var DuplicateLabelDialog = ({
           maxWidth: "200px"
         }
       },
-      __2("After", "elementor")
+      __("After", "elementor")
     )
   ), /* @__PURE__ */ React2.createElement(Divider, { sx: { mt: 0.5, mb: 0.5 } }), /* @__PURE__ */ React2.createElement(Stack, { direction: "column", gap: 0.5, sx: { pb: 2 } }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ React2.createElement(
     Box,
@@ -926,26 +595,170 @@ var DuplicateLabelDialog = ({
       },
       /* @__PURE__ */ React2.createElement(EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", sx: { color: "text.primary" } }, modified))
     )
-  ))), /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, __2("Your designs and classes are safe.", "elementor")), __2(
+  ))), /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, __("Your designs and classes are safe.", "elementor")), __(
     "Only the prefixes were added. Find them in Class Manager by searching",
     "elementor"
-  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, __2("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog }, __2("Done", "elementor"))));
+  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, __("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog }, __("Done", "elementor"))));
+};
+
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/events";
+import { __getState as getState } from "@elementor/store";
+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;
+    case "classSyncToV3PopupShown":
+      return {
+        ...payload,
+        interaction_type: "popup_shown",
+        target_type: "popup",
+        target_name: "sync_to_v3_popup",
+        interaction_result: "popup_viewed",
+        target_location: "widget_panel",
+        location_l1: "class_manager"
+      };
+    case "classSyncToV3": {
+      const classLabel = getCssClass(payload.classId).label;
+      const isSync = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: classLabel,
+        target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+        interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
+        target_location: "widget_panel",
+        location_l1: "class_manager",
+        interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
+      };
+    }
+    case "classSyncToV3PopupClick": {
+      const isSyncAction = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: "button",
+        target_name: isSyncAction ? "sync_to_v3" : "cancel",
+        interaction_result: isSyncAction ? "class_is_synced" : "cancel",
+        target_location: "sync_to_v3_popup"
+      };
+    }
+    default:
+      return payload;
+  }
+};
+var track = (data) => {
+  const { dispatchEvent, config } = 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(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/save-global-classes.tsx
 async function saveGlobalClasses({ context: context2, onApprove }) {
-  const state = selectData(getState3());
+  const state = selectData(getState2());
   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(getState3()))
+    changes: calculateChanges(state, currentContext(getState2()))
   });
-  dispatch2(slice.actions.reset({ context: context2 }));
+  dispatch(slice.actions.reset({ context: context2 }));
   window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
   if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
-    dispatch2(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    dispatch(slice.actions.updateMultiple(response.data.data.modifiedLabels));
     trackGlobalClasses({
       event: "classPublishConflict",
       numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
@@ -976,7 +789,7 @@ function calculateChanges(state, initialData) {
 // src/components/search-and-filter/components/filter/active-filters.tsx
 import * as React6 from "react";
 import { Chip as Chip2, Stack as Stack3 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/components/search-and-filter/components/filter/clear-icon-button.tsx
 import * as React4 from "react";
@@ -1007,11 +820,11 @@ var CustomIconButton = styled(IconButton)(({ theme }) => ({
 // src/components/search-and-filter/components/filter/filter-list.tsx
 import * as React5 from "react";
 import { Checkbox, Chip, MenuItem, MenuList, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 var filterConfig = {
-  unused: __3("Unused", "elementor"),
-  empty: __3("Empty", "elementor"),
-  onThisPage: __3("On this page", "elementor")
+  unused: __2("Unused", "elementor"),
+  empty: __2("Empty", "elementor"),
+  onThisPage: __2("On this page", "elementor")
 };
 var FilterList = () => {
   const {
@@ -1094,7 +907,7 @@ var ActiveFilters = () => {
     ClearIconButton,
     {
       trigger: "header",
-      tooltipText: __4("Clear Filters", "elementor"),
+      tooltipText: __3("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -1115,7 +928,7 @@ import { useEffect } from "react";
 import { PopoverBody, PopoverHeader } from "@elementor/editor-ui";
 import { FilterIcon } from "@elementor/icons";
 import { bindPopover, bindToggle, Divider as Divider2, Popover, ToggleButton, Tooltip as Tooltip2, usePopupState } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 var CssClassFilter = () => {
   const {
     filters: { filters }
@@ -1132,7 +945,7 @@ var CssClassFilter = () => {
     }
   }, [popupState.isOpen]);
   const showCleanIcon = Object.values(filters).some((value) => value);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Tooltip2, { title: __5("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Tooltip2, { title: __4("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
     ToggleButton,
     {
       value: "filter",
@@ -1166,12 +979,12 @@ var CssClassFilter = () => {
             {
               trigger: "menu",
               key: "clear-all-button",
-              tooltipText: __5("Clear all", "elementor")
+              tooltipText: __4("Clear all", "elementor")
             }
           )
         ] : [],
         onClose: popupState.close,
-        title: __5("Filters", "elementor"),
+        title: __4("Filters", "elementor"),
         icon: /* @__PURE__ */ React7.createElement(FilterIcon, { fontSize: "tiny" })
       }
     ),
@@ -1191,7 +1004,7 @@ var CssClassFilter = () => {
 import * as React8 from "react";
 import { SearchIcon } from "@elementor/icons";
 import { Box as Box3, InputAdornment, Stack as Stack4, TextField } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var ClassManagerSearch = () => {
   const {
     search: { inputValue, handleChange }
@@ -1208,7 +1021,7 @@ var ClassManagerSearch = () => {
           event: "classManagerSearched"
         });
       },
-      placeholder: __6("Search", "elementor"),
+      placeholder: __5("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
         startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React8.createElement(SearchIcon, { fontSize: "tiny" }))
@@ -1223,7 +1036,7 @@ import { useState as useState2 } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
 import { Box as Box4, Image, Typography as Typography3 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
@@ -1232,7 +1045,7 @@ var ClassManagerIntroduction = () => {
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __7("Class Manager", "elementor"),
+      title: __6("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -1252,24 +1065,24 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React9.createElement(Box4, { p: 3 }, /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __7(
+  return /* @__PURE__ */ React9.createElement(Box4, { p: 3 }, /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __6(
     "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__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __7(
+  )), /* @__PURE__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __6(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
 };
 
 // src/components/class-manager/delete-class.ts
-import { __dispatch as dispatch3 } from "@elementor/store";
+import { __dispatch as dispatch2 } from "@elementor/store";
 var isDeleted = false;
 var deleteClass = (id2) => {
   trackGlobalClasses({
     event: "classDeleted",
     classId: id2,
     runAction: () => {
-      dispatch3(slice.actions.delete(id2));
+      dispatch2(slice.actions.delete(id2));
       isDeleted = true;
     }
   });
@@ -1290,7 +1103,7 @@ import { useEffect as useEffect2, useMemo as useMemo3, useState as useState5 } f
 import { __useDispatch as useDispatch } from "@elementor/store";
 import { List, Stack as Stack8, styled as styled6, Typography as Typography8 } from "@elementor/ui";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/hooks/use-ordered-classes.ts
 import { __useSelector as useSelector3 } from "@elementor/store";
@@ -1317,7 +1130,7 @@ import {
   Typography as Typography6,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 import * as React11 from "react";
@@ -1338,7 +1151,7 @@ import {
   PostTypeIcon
 } from "@elementor/icons";
 import { Box as Box5, Chip as Chip3, Divider as Divider3, Icon as Icon2, MenuList as MenuList2, Stack as Stack5, styled as styled2, Tooltip as Tooltip3, Typography as Typography4 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 
 // src/hooks/use-css-class-usage-by-id.ts
 var EMPTY_CLASS_USAGE = {
@@ -1354,23 +1167,23 @@ var useCssClassUsageByID = (id2) => {
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var iconMapper = {
   "wp-post": {
-    label: __8("Post", "elementor"),
+    label: __7("Post", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(PostTypeIcon, { fontSize: "inherit" })
   },
   "wp-page": {
-    label: __8("Page", "elementor"),
+    label: __7("Page", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(PagesIcon, { fontSize: "inherit" })
   },
   popup: {
-    label: __8("Popup", "elementor"),
+    label: __7("Popup", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(PopupTemplateIcon, { fontSize: "inherit" })
   },
   header: {
-    label: __8("Header", "elementor"),
+    label: __7("Header", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(HeaderTemplateIcon, { fontSize: "inherit" })
   },
   footer: {
-    label: __8("Footer", "elementor"),
+    label: __7("Footer", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(FooterTemplateIcon, { fontSize: "inherit" })
   }
 };
@@ -1400,7 +1213,7 @@ var CssClassUsagePopover = ({
     PopoverHeader2,
     {
       icon: /* @__PURE__ */ React11.createElement(CurrentLocationIcon, { fontSize: "tiny" }),
-      title: /* @__PURE__ */ React11.createElement(Stack5, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Box5, { "aria-label": "header-title" }, __8("Locator", "elementor")), /* @__PURE__ */ React11.createElement(Box5, null, /* @__PURE__ */ React11.createElement(Chip3, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      title: /* @__PURE__ */ React11.createElement(Stack5, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Box5, { "aria-label": "header-title" }, __7("Locator", "elementor")), /* @__PURE__ */ React11.createElement(Box5, null, /* @__PURE__ */ React11.createElement(Chip3, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
       onClose
     }
   ), /* @__PURE__ */ React11.createElement(Divider3, null), /* @__PURE__ */ React11.createElement(PopoverBody2, { width: 300 }, /* @__PURE__ */ React11.createElement(
@@ -1491,7 +1304,7 @@ import {
   Tooltip as Tooltip4,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __8 } from "@wordpress/i18n";
 var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const {
     data: { total },
@@ -1572,9 +1385,9 @@ var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React12.createElem
   {
     disableInteractive: true,
     placement: "top",
-    title: `${__9("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+    title: `${__8("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
       "{{locations}}",
-      total === 1 ? __9("location", "elementor") : __9("locations", "elementor")
+      total === 1 ? __8("location", "elementor") : __8("locations", "elementor")
     )}`
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
@@ -1585,7 +1398,7 @@ var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
     disableInteractive: true,
     placement: "top",
     color: "secondary",
-    content: /* @__PURE__ */ React12.createElement(InfoAlert, { sx: { mt: 1 } }, __9("This class isn\u2019t being used yet.", "elementor"))
+    content: /* @__PURE__ */ React12.createElement(InfoAlert, { sx: { mt: 1 } }, __8("This class isn\u2019t being used yet.", "elementor"))
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
 );
@@ -1595,7 +1408,7 @@ import * as React13 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState3 } from "react";
 import { ConfirmationDialog } from "@elementor/editor-ui";
 import { Typography as Typography5 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var context = createContext2(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = useState3(null);
@@ -1616,14 +1429,14 @@ var DeleteClassDialog = ({ label, id: id2 }) => {
     closeDialog2();
     deleteClass(id2);
   };
-  const text = total && content.length ? __10(
+  const text = total && content.length ? __9(
     "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()) : __10(
+  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : __9(
     "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__ */ React13.createElement(ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(ConfirmationDialog.Title, null, __10("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(ConfirmationDialog.ContentText, null, __10("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(Typography5, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
+  return /* @__PURE__ */ React13.createElement(ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(ConfirmationDialog.Title, null, __9("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(ConfirmationDialog.ContentText, null, __9("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(Typography5, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext2(context);
@@ -1777,7 +1590,7 @@ var ClassItem = ({
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: __11("More actions", "elementor")
+          title: __10("More actions", "elementor")
         },
         /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", ...bindTrigger2(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
       )
@@ -1804,7 +1617,7 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, __11("Rename", "elementor"))
+      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, __10("Rename", "elementor"))
     ),
     onToggleSync && /* @__PURE__ */ React15.createElement(
       MenuListItem,
@@ -1814,7 +1627,7 @@ var ClassItem = ({
           onToggleSync(id2, !syncToV3);
         }
       },
-      /* @__PURE__ */ React15.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? __11("Stop syncing to Global Fonts", "elementor") : __11("Sync to Global Fonts", "elementor")))
+      /* @__PURE__ */ React15.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? __10("Stop syncing to Global Fonts", "elementor") : __10("Sync to Global Fonts", "elementor")))
     ),
     /* @__PURE__ */ React15.createElement(
       MenuListItem,
@@ -1824,7 +1637,7 @@ var ClassItem = ({
           openDialog2({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "error.light" } }, __11("Delete", "elementor"))
+      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "error.light" } }, __10("Delete", "elementor"))
     )
   ));
 };
@@ -1890,7 +1703,7 @@ var validateLabel = (newLabel) => {
 import * as React16 from "react";
 import { ColorSwatchIcon as ColorSwatchIcon2, PhotoIcon } from "@elementor/icons";
 import { Box as Box9, Link, Stack as Stack7, Typography as Typography7 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 var getNotFoundType = (searchValue, filters, filteredClasses) => {
   const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
   const filterNotFound = filters && filters.length === 0;
@@ -1908,18 +1721,18 @@ var getNotFoundType = (searchValue, filters, filteredClasses) => {
 };
 var notFound = {
   filterAndSearch: {
-    mainText: __12("Sorry, nothing matched.", "elementor"),
-    sceneryText: __12("Try something else.", "elementor"),
+    mainText: __11("Sorry, nothing matched.", "elementor"),
+    sceneryText: __11("Try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
-    mainText: __12("Sorry, nothing matched", "elementor"),
-    sceneryText: __12("Clear your input and try something else.", "elementor"),
+    mainText: __11("Sorry, nothing matched", "elementor"),
+    sceneryText: __11("Clear your input and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
-    mainText: __12("Sorry, nothing matched that search.", "elementor"),
-    sceneryText: __12("Clear the filters and try something else.", "elementor"),
+    mainText: __11("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: __11("Clear the filters and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(ColorSwatchIcon2, { color: "inherit", fontSize: "large" })
   }
 };
@@ -1992,7 +1805,7 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
     )
   ),
   /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
-  /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, __12("Clear & try again", "elementor")))
+  /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
 );
 
 // src/components/class-manager/global-classes-list.tsx
@@ -2147,7 +1960,7 @@ var GlobalClassesList = ({
     )
   ));
 };
-var EmptyState = () => /* @__PURE__ */ React17.createElement(Stack8, { 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" }, __13("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", color: "text.secondary" }, __13(
+var EmptyState = () => /* @__PURE__ */ React17.createElement(Stack8, { 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" }, __12("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", color: "text.secondary" }, __12(
   "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"
 )));
@@ -2222,7 +2035,7 @@ import {
   FormControlLabel,
   Typography as Typography9
 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
 var StartSyncToV3Modal = ({
   externalOpen,
@@ -2254,7 +2067,7 @@ var StartSyncToV3Modal = ({
     onConfirm?.();
     onExternalClose?.();
   };
-  return /* @__PURE__ */ React18.createElement(Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(DialogContent2, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(Box10, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(Box10, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(Typography9, { variant: "h6" }, __14("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, __14(
+  return /* @__PURE__ */ React18.createElement(Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(DialogContent2, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(Box10, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(Box10, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(Typography9, { variant: "h6" }, __13("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, __13(
     "Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.",
     "elementor"
   )))), /* @__PURE__ */ React18.createElement(DialogActions2, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
@@ -2267,14 +2080,27 @@ var StartSyncToV3Modal = ({
           onChange: (e) => setShouldShowAgain(!e.target.checked)
         }
       ),
-      label: /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary" }, __14("Don't show again", "elementor"))
+      label: /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary" }, __13("Don't show again", "elementor"))
     }
-  ), /* @__PURE__ */ React18.createElement(Box10, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(Button2, { onClick: handleClose, color: "secondary", size: "small" }, __14("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(Button2, { onClick: handleConfirm, variant: "contained", size: "small" }, __14("Sync to Global Fonts", "elementor")))));
+  ), /* @__PURE__ */ React18.createElement(Box10, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(Button2, { onClick: handleClose, color: "secondary", size: "small" }, __13("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(Button2, { onClick: handleConfirm, variant: "contained", size: "small" }, __13("Sync to Global Fonts", "elementor")))));
 };
 
 // src/components/class-manager/class-manager-panel.tsx
 var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
 var id = "global-classes-manager";
+function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt }) {
+  return /* @__PURE__ */ React19.createElement(
+    ClassManagerPanelRoot,
+    {
+      embedded: true,
+      onRequestClose,
+      onExposeCloseAttempt
+    }
+  );
+}
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React19.createElement(ClassManagerPanelRoot, null);
+}
 var { panel, usePanelActions } = createPanel({
   id,
   component: ClassManagerPanel,
@@ -2290,9 +2116,18 @@ var { panel, usePanelActions } = createPanel({
   },
   isOpenPreviousElement: true
 });
-function ClassManagerPanel() {
+function ClassManagerPanelRoot({
+  embedded = false,
+  onRequestClose,
+  onExposeCloseAttempt
+} = {}) {
   const isDirty2 = useDirtyState();
-  const { close: closePanel } = usePanelActions();
+  const { close: closeStandalonePanel } = usePanelActions();
+  const closePanel = useMemo4(
+    () => embedded ? onRequestClose ?? (async () => {
+    }) : closeStandalonePanel,
+    [embedded, onRequestClose, closeStandalonePanel]
+  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = useState7(null);
@@ -2300,11 +2135,34 @@ function ClassManagerPanel() {
   const [scrollElement, setScrollElement] = useState7(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    dispatch4(slice.actions.resetToInitialState({ context: "frontend" }));
+    dispatch3(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
+  const handleClosePanel = useCallback(() => {
+    if (isDirty2) {
+      openSaveChangesDialog();
+      return;
+    }
+    void closePanel();
+  }, [isDirty2, openSaveChangesDialog, closePanel]);
+  useEffect4(() => {
+    if (!embedded || !onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  useEffect4(() => {
+    if (!embedded) {
+      return;
+    }
+    blockPanelInteractions();
+    return () => {
+      unblockPanelInteractions();
+    };
+  }, [embedded]);
   const handleStopSync = useCallback((classId) => {
-    dispatch4(
+    dispatch3(
       slice.actions.update({
         style: {
           id: classId,
@@ -2316,7 +2174,7 @@ function ClassManagerPanel() {
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = useCallback((classId) => {
-    dispatch4(
+    dispatch3(
       slice.actions.update({
         style: {
           id: classId,
@@ -2338,51 +2196,29 @@ function ClassManagerPanel() {
     [isStopSyncSuppressed, handleStopSync]
   );
   usePreventUnload();
-  return /* @__PURE__ */ React19.createElement(ThemeProvider, null, /* @__PURE__ */ React19.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(Stack9, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(Stack9, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __15("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
-    CloseButton,
-    {
-      sx: { marginLeft: "auto" },
-      disabled: isPublishing,
-      onClose: () => {
-        if (isDirty2) {
-          openSaveChangesDialog();
-          return;
-        }
-        closePanel();
-      }
-    }
-  ))), /* @__PURE__ */ React19.createElement(
-    PanelBody,
+  const searchFiltersBlock = /* @__PURE__ */ React19.createElement(Box11, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(Stack9, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(Box11, { sx: embedded ? { flexGrow: 1, minWidth: 0 } : { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null), embedded && /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null));
+  const listArea = /* @__PURE__ */ React19.createElement(
+    Box11,
     {
+      ref: setScrollElement,
+      px: 2,
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
+        flexGrow: 1,
+        overflowY: "auto",
+        ...embedded ? { minHeight: 0 } : {}
       }
     },
-    /* @__PURE__ */ React19.createElement(Box11, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(Stack9, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(Box11, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React19.createElement(Divider4, null),
     /* @__PURE__ */ React19.createElement(
-      Box11,
+      GlobalClassesList,
       {
-        ref: setScrollElement,
-        px: 2,
-        sx: {
-          flexGrow: 1,
-          overflowY: "auto"
-        }
-      },
-      /* @__PURE__ */ React19.createElement(
-        GlobalClassesList,
-        {
-          disabled: isPublishing,
-          scrollElement,
-          onStopSyncRequest: handleStopSyncRequest,
-          onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
-        }
-      )
+        disabled: isPublishing,
+        scrollElement,
+        onStopSyncRequest: handleStopSyncRequest,
+        onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
+      }
     )
-  ), /* @__PURE__ */ React19.createElement(PanelFooter, null, /* @__PURE__ */ React19.createElement(
+  );
+  const saveFooter = /* @__PURE__ */ React19.createElement(PanelFooter, null, /* @__PURE__ */ React19.createElement(
     Button3,
     {
       fullWidth: true,
@@ -2393,8 +2229,9 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __15("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+    __14("Save changes", "elementor")
+  ));
+  const dialogs = /* @__PURE__ */ React19.createElement(React19.Fragment, null, startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2409,30 +2246,84 @@ function ClassManagerPanel() {
       onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSync(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(DialogHeader2, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(SaveChangesDialog.Title, null, __15("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __15("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __15("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(DialogHeader2, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(SaveChangesDialog.Title, null, __14("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __14("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __14("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __15("Discard", "elementor"),
+          label: __14("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: __15("Save & Continue", "elementor"),
+          label: __14("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
-            closePanel();
+            void closePanel();
           }
         }
       }
     }
   )));
+  const classManagerLayout = embedded ? /* @__PURE__ */ React19.createElement(
+    Stack9,
+    {
+      direction: "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(Divider4, null),
+    listArea,
+    saveFooter
+  ) : /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(Stack9, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(Stack9, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __14("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
+    ClassPanelCloseButton,
+    {
+      disabled: isPublishing,
+      onClose: () => {
+        if (isDirty2) {
+          openSaveChangesDialog();
+          return;
+        }
+        void closeStandalonePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React19.createElement(
+    PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(Divider4, null),
+    listArea
+  ), saveFooter);
+  const core = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, classManagerLayout)), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), dialogs);
+  return embedded ? core : /* @__PURE__ */ React19.createElement(ThemeProvider, null, core);
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(IconButton4, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(Box11, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, __15("Something went wrong", "elementor"))));
+var ClassPanelCloseButton = ({ onClose, sx, ...props }) => /* @__PURE__ */ React19.createElement(
+  IconButton4,
+  {
+    size: "small",
+    color: "secondary",
+    onClick: onClose,
+    "aria-label": "Close",
+    sx: { marginLeft: "auto", ...sx },
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement(XIcon, { fontSize: "small" })
+);
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(Box11, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, __14("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect4(() => {
@@ -2471,7 +2362,7 @@ var TotalCssClassCounter = () => {
 };
 var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   const [, suppressStopSyncMessage] = useSuppressedMessage2(STOP_SYNC_MESSAGE_KEY);
-  return /* @__PURE__ */ React19.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, __15("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, null, __15("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, { sx: { mt: 1 } }, __15(
+  return /* @__PURE__ */ React19.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, __14("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, null, __14("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, { sx: { mt: 1 } }, __14(
     "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
     "elementor"
   ))), /* @__PURE__ */ React19.createElement(
@@ -2479,15 +2370,204 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
     {
       onClose,
       onConfirm,
-      cancelLabel: __15("Cancel", "elementor"),
-      confirmLabel: __15("Got it", "elementor"),
+      cancelLabel: __14("Cancel", "elementor"),
+      confirmLabel: __14("Got it", "elementor"),
       color: "primary",
       onSuppressMessage: suppressStopSyncMessage,
-      suppressLabel: __15("Don't show again", "elementor")
+      suppressLabel: __14("Don't show again", "elementor")
     }
   ));
 };
 
+// src/global-classes-styles-provider.ts
+import {
+  generateId
+} from "@elementor/editor-styles";
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import {
+  __dispatch as dispatch4,
+  __getState as getState3,
+  __subscribeWithSelector as subscribeWithSelector
+} from "@elementor/store";
+import { __ as __15 } from "@wordpress/i18n";
+
+// src/capabilities.ts
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
+var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
+var getCapabilities = () => {
+  const shouldEnforceCapabilities = isExperimentActive(EXPERIMENT_KEY);
+  if (shouldEnforceCapabilities) {
+    return {
+      update: UPDATE_CLASS_CAPABILITY_KEY,
+      create: UPDATE_CLASS_CAPABILITY_KEY,
+      delete: UPDATE_CLASS_CAPABILITY_KEY,
+      updateProps: UPDATE_CLASS_CAPABILITY_KEY
+    };
+  }
+};
+
+// src/global-classes-styles-provider.ts
+var MAX_CLASSES = 100;
+var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
+var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
+var globalClassesStylesProvider = createStylesProvider({
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
+  priority: 30,
+  limit: MAX_CLASSES,
+  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
+  labels: {
+    singular: __15("class", "elementor"),
+    plural: __15("classes", "elementor")
+  },
+  subscribe: (cb) => subscribeWithStates(cb),
+  capabilities: getCapabilities(),
+  actions: {
+    all: () => selectOrderedClasses(getState3()),
+    get: (id2) => selectClass(getState3(), id2),
+    resolveCssName: (id2) => {
+      return selectClass(getState3(), id2)?.label ?? id2;
+    },
+    create: (label, variants = [], id2) => {
+      const classes = selectGlobalClasses(getState3());
+      const existingLabels = Object.values(classes).map((style) => style.label);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      if (!id2) {
+        id2 = generateId("g-", Object.keys(classes));
+      }
+      dispatch4(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      dispatch4(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      dispatch4(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      dispatch4(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      dispatch4(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          custom_css: args.custom_css,
+          props: {}
+        })
+      );
+    },
+    tracking: (data) => {
+      trackGlobalClasses(data).catch((error) => {
+        throw new GlobalClassTrackingError({ cause: error });
+      });
+    }
+  }
+});
+var subscribeWithStates = (cb) => {
+  let previousState = selectData(getState3());
+  return subscribeWithSelector(
+    (state) => state.globalClasses,
+    (currentState) => {
+      cb(previousState.items, currentState.data.items);
+      previousState = currentState.data;
+    }
+  );
+};
+
+// src/mcp-integration/classes-resource.ts
+var GLOBAL_CLASSES_URI = "elementor://global-classes";
+var STORAGE_KEY = "elementor-global-classes";
+var updateLocalStorageCache = () => {
+  const classes = globalClassesStylesProvider.actions.all();
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
+};
+var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
+  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
+    const { sendResourceUpdated, resource, waitForReady } = entry;
+    resource(
+      "global-classes",
+      GLOBAL_CLASSES_URI,
+      {
+        description: "Global classes list."
+      },
+      async () => {
+        return {
+          contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage[STORAGE_KEY] ?? "[]" }]
+        };
+      }
+    );
+    waitForReady().then(() => {
+      updateLocalStorageCache();
+      globalClassesStylesProvider.subscribe(() => {
+        updateLocalStorageCache();
+        sendResourceUpdated({ uri: GLOBAL_CLASSES_URI });
+      });
+    });
+  });
+};
+
+// src/init.ts
+import { injectIntoLogic } from "@elementor/editor";
+import {
+  injectIntoClassSelectorActions,
+  injectIntoCssClassConvert,
+  registerStyleProviderToColors
+} from "@elementor/editor-editing-panel";
+import { getMCPByDomain } from "@elementor/editor-mcp";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
+import { __registerSlice as registerSlice } from "@elementor/store";
+
+// src/components/class-manager/class-manager-button.tsx
+import * as React20 from "react";
+import {
+  __useActiveDocument as useActiveDocument2,
+  __useActiveDocumentActions as useActiveDocumentActions
+} from "@elementor/editor-documents";
+import { useUserStylesCapability } from "@elementor/editor-styles-repository";
+import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
+
+// src/hooks/use-prefetch-css-class-usage.ts
+import { useQueryClient } from "@elementor/query";
+function usePrefetchCssClassUsage() {
+  const queryClient = useQueryClient();
+  const prefetchClassesUsage = () => queryClient.prefetchQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: fetchCssClassUsage
+  });
+  return { prefetchClassesUsage };
+}
+var PrefetchCssClassUsage = () => {
+  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
+  prefetchClassesUsage();
+  return null;
+};
+
 // src/components/class-manager/class-manager-button.tsx
 var trackGlobalClassesButton = () => {
   trackGlobalClasses({
@@ -2506,17 +2586,24 @@ var ClassManagerButton = () => {
   if (!isUserAllowedToUpdateClass) {
     return null;
   }
+  const toggleClassesManagerPanel = () => {
+    if (isExperimentActive2("e_editor_design_system_panel")) {
+      window.dispatchEvent(
+        new CustomEvent("elementor/toggle-design-system", {
+          detail: { tab: "classes" }
+        })
+      );
+    } else {
+      openPanel();
+    }
+  };
   const handleOpenPanel = () => {
     if (document?.isDirty) {
       openSaveChangesDialog();
       return;
     }
-    openPanel();
+    toggleClassesManagerPanel();
     trackGlobalClassesButton();
-    trackGlobalClasses({
-      event: "classManagerOpened",
-      source: "style-panel"
-    });
     prefetchClassesUsage();
   };
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton5, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Title, null, __16("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __16(
@@ -2535,7 +2622,7 @@ var ClassManagerButton = () => {
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
-            openPanel();
+            toggleClassesManagerPanel();
             trackGlobalClassesButton();
             prefetchClassesUsage();
           }
@@ -3148,7 +3235,7 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 
 // src/sync-with-document.tsx
 import { useEffect as useEffect8 } from "react";
-import { __privateListenTo as listenTo2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+import { __privateListenTo as listenTo2, isExperimentActive as isExperimentActive3, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
 import { getCurrentUser } from "@elementor/editor-current-user";
@@ -3211,11 +3298,15 @@ function isDirty() {
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
-  const panelActions = usePanelActions();
+  const { open: openClassPanel } = usePanelActions();
   useEffect8(() => {
-    listenTo2(v1ReadyEvent(), () => {
-      syncWithDocumentSave(panelActions);
+    const unsubscribe = listenTo2(v1ReadyEvent(), () => {
+      const open = isExperimentActive3("e_editor_design_system_panel") ? () => {
+        window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
+      } : openClassPanel;
+      syncWithDocumentSave({ open });
     });
+    return unsubscribe;
   }, []);
   return null;
 }
@@ -3223,7 +3314,9 @@ function SyncWithDocumentSave() {
 // src/init.ts
 function init() {
   registerSlice(slice);
-  registerPanel(panel);
+  if (!isExperimentActive4("e_editor_design_system_panel")) {
+    registerPanel(panel);
+  }
   stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
@@ -3241,10 +3334,12 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  injectIntoLogic({
-    id: "global-classes-open-panel-from-url",
-    component: OpenPanelFromUrl
-  });
+  if (!isExperimentActive4("e_editor_design_system_panel")) {
+    injectIntoLogic({
+      id: "global-classes-open-panel-from-url",
+      component: OpenPanelFromUrl
+    });
+  }
   injectIntoCssClassConvert({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
@@ -3263,6 +3358,7 @@ function init() {
   );
 }
 export {
+  ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI,
   init
 };