@elementor/editor-global-classes 4.1.0-manual → 4.2.0-839

package/dist/index.mjs

@@ -1,28 +1,45 @@
-// src/global-classes-styles-provider.ts
-import { generateId } from "@elementor/editor-styles";
-import { createStylesProvider } from "@elementor/editor-styles-repository";
+// 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 {
-  __dispatch as dispatch,
-  __getState as getState2,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ } from "@wordpress/i18n";
+  __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/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/hooks/use-classes-order.ts
+import { __useSelector as useSelector } from "@elementor/store";
+
+// src/store.ts
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice
+} from "@elementor/store";
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -39,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 {
@@ -112,6 +120,7 @@ var SnapshotHistory = class _SnapshotHistory {
 var localHistory = SnapshotHistory.get("global-classes");
 var initialState = {
   data: { items: {}, order: [] },
+  classLabels: {},
   initialData: {
     frontend: { items: {}, order: [] },
     preview: { items: {}, order: [] }
@@ -124,17 +133,19 @@ var slice = createSlice({
   initialState,
   reducers: {
     load(state, {
-      payload: { frontend, preview }
+      payload: { frontend, preview, classLabels }
     }) {
       state.initialData.frontend = frontend;
       state.initialData.preview = preview;
       state.data = preview;
+      state.classLabels = classLabels;
       state.isDirty = false;
     },
     add(state, { payload }) {
       localHistory.next(state.data);
       state.data.items[payload.id] = payload;
       state.data.order.unshift(payload.id);
+      state.classLabels[payload.id] = payload.label;
       state.isDirty = true;
     },
     delete(state, { payload }) {
@@ -143,6 +154,7 @@ var slice = createSlice({
         Object.entries(state.data.items).filter(([id2]) => id2 !== payload)
       );
       state.data.order = state.data.order.filter((id2) => id2 !== payload);
+      delete state.classLabels[payload];
       state.isDirty = true;
     },
     setOrder(state, { payload }) {
@@ -164,6 +176,7 @@ var slice = createSlice({
       localHistory.next(state.data);
       Object.entries(payload).forEach(([id2, { modified }]) => {
         state.data.items[id2].label = modified;
+        state.classLabels[id2] = modified;
       });
       state.isDirty = false;
     },
@@ -179,9 +192,14 @@ var slice = createSlice({
       let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
       customCss = customCss?.raw ? customCss : null;
       if (variant) {
-        const variantProps = JSON.parse(JSON.stringify(variant.props));
         const payloadProps = JSON.parse(JSON.stringify(payload.props));
-        variant.props = mergeProps(variantProps, payloadProps);
+        const mode = payload.mode ?? "merge";
+        if (mode === "replace") {
+          variant.props = payloadProps;
+        } else {
+          const variantProps = JSON.parse(JSON.stringify(variant.props));
+          variant.props = mergeProps(variantProps, payloadProps);
+        }
         variant.custom_css = customCss;
         style.variants = getNonEmptyVariants(style);
       } else {
@@ -223,6 +241,28 @@ var slice = createSlice({
         state.data = data;
         state.isDirty = true;
       }
+    },
+    mergeExistingClasses(state, {
+      payload: { preview, frontend }
+    }) {
+      Object.entries(preview).forEach(([id2, previewClassData]) => {
+        const frontendClassData = frontend[id2];
+        if (previewClassData === null || previewClassData === void 0) {
+          return;
+        }
+        if (!(id2 in state.data.items)) {
+          state.data.items[id2] = previewClassData;
+        }
+        if (!(id2 in state.initialData.frontend.items)) {
+          state.initialData.frontend.items[id2] = frontendClassData;
+        }
+        if (!(id2 in state.initialData.preview.items)) {
+          state.initialData.preview.items[id2] = previewClassData;
+        }
+        if (!(id2 in state.classLabels)) {
+          state.classLabels[id2] = previewClassData.label;
+        }
+      });
     }
   }
 });
@@ -242,404 +282,39 @@ var getNonEmptyVariants = (style) => {
     ({ props, custom_css: customCss }) => Object.keys(props).length || customCss?.raw
   );
 };
+var placeholderDefinition = (id2, label) => ({
+  id: id2,
+  type: "class",
+  label,
+  variants: []
+});
 var selectData = (state) => state[SLICE_NAME].data;
+var selectClassLabels = (state) => state[SLICE_NAME].classLabels;
 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])
+  selectData,
+  selectClassLabels,
+  ({ items, order }, classLabels) => order.map((id2) => {
+    const loaded = items[id2];
+    if (loaded) {
+      return loaded;
+    }
+    const label = classLabels[id2];
+    return label !== void 0 ? placeholderDefinition(id2, label) : null;
+  }).filter((s) => s !== null)
 );
 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 = []) => {
-      const classes = selectGlobalClasses(getState2());
-      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 = generateId("g-", existingIds);
-      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
-        })
-      );
-    },
-    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 { getCurrentDocument, getV1DocumentsManager, 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 { __privateRunCommand as runCommand, 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 selectIsClassFetched = (state, id2) => !!state[SLICE_NAME].initialData.preview.items[id2] || !!state[SLICE_NAME].initialData.frontend.items[id2] || false;
 
 // src/hooks/use-classes-order.ts
-import { __useSelector as useSelector } from "@elementor/store";
 var useClassesOrder = () => {
   return useSelector(selectOrder);
 };
@@ -711,12 +386,62 @@ var useSearchAndFilters = () => {
   return context2;
 };
 
-// src/hooks/use-filtered-css-class-usage.tsx
-import { useMemo } from "react";
-import { __useActiveDocument as useActiveDocument } from "@elementor/editor-documents";
+// src/hooks/use-filtered-css-class-usage.tsx
+import { useMemo } from "react";
+import { __useActiveDocument as useActiveDocument } from "@elementor/editor-documents";
+
+// 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 RESOURCE_POST_URL = `${RESOURCE_URL}/post`;
+var RESOURCE_STYLES_URL = `${RESOURCE_URL}/styles`;
+function saveGlobalClasses(context2, payload) {
+  return httpService().put(`${BASE_URL}${RESOURCE_URL}`, payload, {
+    params: { context: context2 }
+  });
+}
+var apiClient = {
+  usage: () => httpService().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
+  all: (context2 = "preview") => httpService().get(`${BASE_URL}${RESOURCE_URL}`, {
+    params: { context: context2 }
+  }),
+  getStylesForPost: (postId, context2 = "preview") => httpService().get(`${BASE_URL}${RESOURCE_POST_URL}`, {
+    params: { context: context2, post_id: postId }
+  }),
+  getStylesByIds: (ids, context2 = "preview") => httpService().get(`${BASE_URL}${RESOURCE_STYLES_URL}`, {
+    params: { context: context2, ids: ids.join(",") }
+  }),
+  publish: (payload) => saveGlobalClasses("frontend", payload),
+  saveDraft: (payload) => saveGlobalClasses("preview", payload)
+};
+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
-import { useQuery } from "@elementor/query";
 var useCssClassUsage = () => {
   return useQuery({
     queryKey: [QUERY_KEY],
@@ -809,7 +534,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
@@ -828,7 +553,7 @@ import {
   Stack,
   Typography
 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 var DUP_PREFIX = "DUP_";
 var DuplicateLabelDialog = ({
   modifiedLabels,
@@ -839,7 +564,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(
@@ -864,7 +589,7 @@ var DuplicateLabelDialog = ({
           minWidth: 0
         }
       },
-      __2("Before", "elementor")
+      __("Before", "elementor")
     ),
     /* @__PURE__ */ React2.createElement(
       Typography,
@@ -879,7 +604,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,
@@ -917,26 +642,180 @@ 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 state = getState();
+  const cssClass = selectClass(state, classId);
+  if (cssClass) {
+    return cssClass;
+  }
+  const label = selectClassLabels(state)[classId];
+  if (label !== void 0) {
+    return placeholderDefinition(classId, label);
+  }
+  throw new Error(`CSS class with ID ${classId} not found`);
+};
+var trackDeleteClass = async (classId) => {
+  const classTitle = getCssClass(classId).label;
+  const totalInstances = await getTotalInstancesByCssClassID(classId);
+  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());
+async function saveGlobalClasses2({ context: context2, onApprove }) {
+  const state = selectData(getState2());
   const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
   const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
+  const changes = calculateChanges(state, currentContext(getState2()));
+  const touchedIds = [...changes.added, ...changes.modified];
+  const touchedItems = Object.fromEntries(
+    touchedIds.map((id2) => [id2, state.items[id2]]).filter(([, v]) => v)
+  );
   const response = await apiAction({
-    items: state.items,
+    items: touchedItems,
     order: state.order,
-    changes: calculateChanges(state, currentContext(getState3()))
+    changes
   });
-  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
@@ -955,19 +834,23 @@ async function saveGlobalClasses({ context: context2, onApprove }) {
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
   const initialDataIds = Object.keys(initialData.items);
+  const { order: stateOrder } = state;
+  const { order: initialDataOrder } = initialData;
+  const order = stateOrder.join(";") !== initialDataOrder.join(";");
   return {
     added: stateIds.filter((id2) => !initialDataIds.includes(id2)),
     deleted: initialDataIds.filter((id2) => !stateIds.includes(id2)),
     modified: stateIds.filter((id2) => {
       return id2 in initialData.items && hash(state.items[id2]) !== hash(initialData.items[id2]);
-    })
+    }),
+    order
   };
 }
 
 // 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";
@@ -998,11 +881,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 {
@@ -1085,7 +968,7 @@ var ActiveFilters = () => {
     ClearIconButton,
     {
       trigger: "header",
-      tooltipText: __4("Clear Filters", "elementor"),
+      tooltipText: __3("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -1106,7 +989,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 }
@@ -1123,7 +1006,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",
@@ -1157,12 +1040,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" })
       }
     ),
@@ -1182,7 +1065,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 }
@@ -1199,7 +1082,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" }))
@@ -1214,7 +1097,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);
@@ -1223,7 +1106,7 @@ var ClassManagerIntroduction = () => {
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __7("Class Manager", "elementor"),
+      title: __6("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -1243,24 +1126,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;
     }
   });
@@ -1280,7 +1163,8 @@ import * as React17 from "react";
 import { useEffect as useEffect2, useMemo as useMemo3, useState as useState5 } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
 import { List, Stack as Stack8, styled as styled6, Typography as Typography8 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { __ as __12 } from "@wordpress/i18n";
 
 // src/hooks/use-ordered-classes.ts
 import { __useSelector as useSelector3 } from "@elementor/store";
@@ -1307,7 +1191,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";
@@ -1328,7 +1212,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 = {
@@ -1344,23 +1228,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" })
   }
 };
@@ -1390,7 +1274,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(
@@ -1481,7 +1365,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 },
@@ -1562,9 +1446,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)
@@ -1575,7 +1459,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)
 );
@@ -1585,7 +1469,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);
@@ -1606,14 +1490,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);
@@ -1632,9 +1516,17 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(
+  UnstableSortableProvider,
+  {
+    restrictAxis: true,
+    variant: "static",
+    dragPlaceholderStyle: { visibility: "hidden" },
+    ...props
+  }
+);
 var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, ...props }) => {
+var SortableItem = ({ children, id: id2, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     UnstableSortableItem,
     {
@@ -1655,7 +1547,7 @@ var SortableItem = ({ children, id: id2, ...props }) => {
           Box7,
           {
             ...itemProps,
-            style: itemStyle,
+            style: { ...itemStyle, ...!isDragOverlay ? style : null },
             component: "li",
             role: "listitem",
             sx: {
@@ -1759,7 +1651,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" }))
       )
@@ -1786,7 +1678,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,
@@ -1796,7 +1688,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,
@@ -1806,7 +1698,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"))
     )
   ));
 };
@@ -1872,7 +1764,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;
@@ -1890,18 +1782,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" })
   }
 };
@@ -1974,38 +1866,65 @@ 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
-var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) => {
+var ROW_HEIGHT = 40;
+var OVERSCAN = 6;
+var GlobalClassesList = ({
+  disabled,
+  scrollElement,
+  onStopSyncRequest,
+  onStartSyncRequest
+}) => {
   const {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch5 = useDispatch();
+  const dispatch7 = useDispatch();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = useState5(null);
   const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
+  const virtualizer = useVirtualizer({
+    count: filteredCssClasses.length,
+    getScrollElement: () => scrollElement ?? null,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    getItemKey: (index) => filteredCssClasses[index].id,
+    // Keep the actively dragged row mounted even when scrolled out of view.
+    // SortableItem unregisters its render on unmount, which would make the
+    // DragOverlay clone disappear mid-drag.
+    rangeExtractor: (range) => {
+      const indices = new Set(defaultRangeExtractor(range));
+      if (draggedItemId) {
+        const draggedItemIndex = filteredCssClasses.findIndex((cssClass) => cssClass.id === draggedItemId);
+        if (draggedItemIndex >= 0) {
+          indices.add(draggedItemIndex);
+        }
+      }
+      return [...indices].sort((a, b) => a - b);
+    }
+  });
   useEffect2(() => {
     const handler2 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
         event.preventDefault();
         if (event.shiftKey) {
-          dispatch5(slice.actions.redo());
+          dispatch7(slice.actions.redo());
           return;
         }
-        dispatch5(slice.actions.undo());
+        dispatch7(slice.actions.undo());
       }
     };
     window.addEventListener("keydown", handler2, {
       capture: true
     });
     return () => window.removeEventListener("keydown", handler2);
-  }, [dispatch5]);
+  }, [dispatch7]);
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React17.createElement(EmptyState, null);
   }
@@ -2015,69 +1934,94 @@ var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) =>
   }
   const isFiltersApplied = filters?.length || searchValue;
   const allowSorting = filteredCssClasses.length > 1 && !isFiltersApplied;
-  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
-    SortableProvider,
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(
+    List,
     {
-      value: classesOrder,
-      onChange: reorderClasses,
-      disableDragOverlay: !allowSorting
-    },
-    filteredCssClasses?.map((cssClass) => /* @__PURE__ */ React17.createElement(SortableItem, { key: cssClass.id, id: cssClass.id }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
-      if (isDragged && !draggedItemId) {
-        setDraggedItemId(cssClass.id);
+      sx: {
+        position: "relative",
+        display: "block",
+        height: virtualizer.getTotalSize(),
+        padding: 0
       }
-      return /* @__PURE__ */ React17.createElement(
-        ClassItem,
-        {
-          id: cssClass.id,
-          label: cssClass.label,
-          renameClass: (newLabel) => {
-            trackGlobalClasses({
-              event: "classRenamed",
-              classId: cssClass.id,
-              oldValue: cssClass.label,
-              newValue: newLabel,
-              source: "class-manager"
-            });
-            dispatch5(
-              slice.actions.update({
-                style: {
-                  id: cssClass.id,
-                  label: newLabel
-                }
-              })
-            );
-          },
-          selected: isDragged,
-          disabled: disabled || isDragPlaceholder,
-          sortableTriggerProps: {
-            ...triggerProps,
-            style: triggerStyle
+    },
+    /* @__PURE__ */ React17.createElement(
+      SortableProvider,
+      {
+        value: classesOrder,
+        onChange: reorderClasses,
+        onDragStart: (event) => setDraggedItemId(event.active.id),
+        onDragEnd: () => setDraggedItemId(null),
+        onDragCancel: () => setDraggedItemId(null),
+        disableDragOverlay: !allowSorting
+      },
+      virtualizer.getVirtualItems().map((virtualRow) => {
+        const cssClass = filteredCssClasses[virtualRow.index];
+        return /* @__PURE__ */ React17.createElement(
+          SortableItem,
+          {
+            key: virtualRow.key,
+            id: cssClass.id,
+            style: {
+              position: "absolute",
+              top: virtualRow.start,
+              left: 0,
+              width: "100%"
+            }
           },
-          showSortIndicator: allowSorting,
-          syncToV3: cssClass.sync_to_v3,
-          onToggleSync: (id2, newValue) => {
-            if (!newValue && onStopSyncRequest) {
-              onStopSyncRequest(id2);
-            } else if (newValue && onStartSyncRequest) {
-              onStartSyncRequest(id2);
-            } else {
-              dispatch5(
-                slice.actions.update({
-                  style: {
-                    id: id2,
-                    sync_to_v3: newValue
-                  }
-                })
-              );
+          ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React17.createElement(
+            ClassItem,
+            {
+              id: cssClass.id,
+              label: cssClass.label,
+              renameClass: (newLabel) => {
+                trackGlobalClasses({
+                  event: "classRenamed",
+                  classId: cssClass.id,
+                  oldValue: cssClass.label,
+                  newValue: newLabel,
+                  source: "class-manager"
+                });
+                dispatch7(
+                  slice.actions.update({
+                    style: {
+                      id: cssClass.id,
+                      label: newLabel
+                    }
+                  })
+                );
+              },
+              selected: isDragged,
+              disabled: disabled || isDragPlaceholder,
+              sortableTriggerProps: {
+                ...triggerProps,
+                style: triggerStyle
+              },
+              showSortIndicator: allowSorting,
+              syncToV3: cssClass.sync_to_v3,
+              onToggleSync: (id2, newValue) => {
+                if (!newValue && onStopSyncRequest) {
+                  onStopSyncRequest(id2);
+                } else if (newValue && onStartSyncRequest) {
+                  onStartSyncRequest(id2);
+                } else {
+                  dispatch7(
+                    slice.actions.update({
+                      style: {
+                        id: id2,
+                        sync_to_v3: newValue
+                      }
+                    })
+                  );
+                }
+              }
             }
-          }
-        }
-      );
-    }))
-  )));
+          )
+        );
+      })
+    )
+  ));
 };
-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"
 )));
@@ -2087,10 +2031,10 @@ var StyledHeader = styled6(Typography8)(({ theme, variant }) => ({
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch5 = useDispatch();
+  const dispatch7 = useDispatch();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch5(slice.actions.setOrder(newIds));
+    dispatch7(slice.actions.setOrder(newIds));
     if (draggedItemId) {
       trackGlobalClasses({
         event: "classManagerReorder",
@@ -2152,7 +2096,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,
@@ -2184,7 +2128,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(
@@ -2197,24 +2141,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";
-var reloadDocument = () => {
-  const currentDocument = getCurrentDocument();
-  const documentsManager = getV1DocumentsManager();
-  documentsManager.invalidateCache();
-  return runCommand("editor/documents/switch", {
-    id: currentDocument?.id,
-    shouldScroll: false,
-    shouldNavigateToDefaultRoute: false
-  });
-};
+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,
@@ -2225,25 +2172,58 @@ var { panel, usePanelActions } = createPanel({
   },
   onClose: async () => {
     changeEditMode("edit");
-    await reloadDocument();
+    await reloadCurrentDocument();
     unblockPanelInteractions();
   },
   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);
   const [isStopSyncSuppressed] = useSuppressedMessage2(STOP_SYNC_MESSAGE_KEY);
+  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,
@@ -2255,7 +2235,7 @@ function ClassManagerPanel() {
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = useCallback((classId) => {
-    dispatch4(
+    dispatch3(
       slice.actions.update({
         style: {
           id: classId,
@@ -2277,49 +2257,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,
       {
-        px: 2,
-        sx: {
-          flexGrow: 1,
-          overflowY: "auto"
-        }
-      },
-      /* @__PURE__ */ React19.createElement(
-        GlobalClassesList,
-        {
-          disabled: isPublishing,
-          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,
@@ -2330,8 +2290,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,
@@ -2346,30 +2307,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(() => {
@@ -2386,7 +2401,7 @@ var usePreventUnload = () => {
 };
 var usePublish = () => {
   return useMutation({
-    mutationFn: () => saveGlobalClasses({ context: "frontend" }),
+    mutationFn: () => saveGlobalClasses2({ context: "frontend" }),
     onSuccess: async () => {
       setDocumentModifiedStatus(false);
       if (hasDeletedItems()) {
@@ -2408,7 +2423,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(
@@ -2416,15 +2431,326 @@ 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/mcp-integration/classes-resource.ts
+import { __getState as getState5 } from "@elementor/store";
+
+// src/global-classes-styles-provider.ts
+import {
+  generateId
+} from "@elementor/editor-styles";
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import {
+  __dispatch as dispatch6,
+  __getState as getState4,
+  __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/load-existing-classes.ts
+import { __dispatch as dispatch5, __getState as getState3 } from "@elementor/store";
+
+// src/load-document-classes.ts
+import { getCurrentDocument } from "@elementor/editor-documents";
+import { __dispatch as dispatch4 } from "@elementor/store";
+
+// src/utils/create-labels-for-classes.ts
+function createLabelsForClasses(entries) {
+  return Object.fromEntries(entries.map((e) => [e.id, e.label]));
+}
+
+// src/load-document-classes.ts
+function styleDefinitionsMapWithoutNull(map) {
+  return Object.fromEntries(
+    Object.entries(map).filter(
+      (entry) => entry[1] !== null
+    )
+  );
+}
+function resetGlobalClassesState(globalOrder, classLabels) {
+  dispatch4(
+    slice.actions.load({
+      preview: { items: {}, order: globalOrder },
+      frontend: { items: {}, order: globalOrder },
+      classLabels
+    })
+  );
+}
+async function loadCurrentDocumentClasses() {
+  const previewIndexRes = await apiClient.all("preview");
+  const previewIndex = previewIndexRes.data.data;
+  const classLabels = createLabelsForClasses(previewIndex);
+  const globalOrder = previewIndex.map((e) => e.id);
+  resetGlobalClassesState(globalOrder, classLabels);
+  const postId = getCurrentDocument()?.id;
+  if (!postId) {
+    return;
+  }
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(postId, "preview"),
+    apiClient.getStylesForPost(postId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  dispatch4(
+    slice.actions.load({
+      preview: { items: previewItems, order: globalOrder },
+      frontend: { items: frontendItems, order: globalOrder },
+      classLabels
+    })
+  );
+}
+async function addDocumentClasses(documentId) {
+  const [previewPostRes, frontendPostRes] = await Promise.all([
+    apiClient.getStylesForPost(documentId, "preview"),
+    apiClient.getStylesForPost(documentId, "frontend")
+  ]);
+  const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
+  dispatch4(
+    slice.actions.mergeExistingClasses({
+      preview: previewItems,
+      frontend: frontendItems
+    })
+  );
+}
+
+// src/load-existing-classes.ts
+var pendingLoad = null;
+var pendingIds = /* @__PURE__ */ new Set();
+async function loadExistingClasses(classIds) {
+  const existingClasses = selectGlobalClasses(getState3());
+  const missingIds = classIds.filter((id2) => !(id2 in existingClasses));
+  if (missingIds.length === 0) {
+    return;
+  }
+  missingIds.forEach((id2) => pendingIds.add(id2));
+  if (pendingLoad) {
+    await pendingLoad;
+    return loadExistingClasses(classIds);
+  }
+  pendingLoad = fetchAndMergeClasses();
+  try {
+    await pendingLoad;
+  } finally {
+    pendingLoad = null;
+  }
+}
+async function fetchAndMergeClasses() {
+  const idsToFetch = Array.from(pendingIds);
+  pendingIds.clear();
+  if (idsToFetch.length === 0) {
+    return;
+  }
+  const previewResponse = await apiClient.getStylesByIds(idsToFetch, "preview");
+  const frontendResponse = await apiClient.getStylesByIds(idsToFetch, "frontend");
+  const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
+  const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
+  dispatch5(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
+}
+
+// src/global-classes-styles-provider.ts
+var MAX_CLASSES = 5e3;
+var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
+var PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(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(getState4()),
+    get: (id2) => {
+      const state = getState4();
+      const isFetched = selectIsClassFetched(state, id2);
+      const style = selectClass(state, id2);
+      if (isFetched || style) {
+        return style;
+      }
+      loadExistingClasses([id2]);
+      const label = selectClassLabels(state)[id2] ?? id2;
+      return placeholderDefinition(id2, label);
+    },
+    resolveCssName: (id2) => {
+      const state = getState4();
+      const loaded = selectClass(state, id2);
+      if (loaded) {
+        return loaded.label;
+      }
+      const fromIndex = selectClassLabels(state)[id2];
+      return fromIndex ?? id2;
+    },
+    create: (label, variants = [], id2) => {
+      const existingClasses = Object.entries(selectClassLabels(getState4()));
+      const existingLabels = existingClasses.map(([, classLabel]) => classLabel);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      const existingIds = existingClasses.map(([existingId]) => existingId);
+      if (!id2) {
+        id2 = generateId("g-", existingIds);
+      }
+      dispatch6(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      dispatch6(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      dispatch6(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      dispatch6(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      dispatch6(
+        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(getState4());
+  return subscribeWithSelector(
+    (state) => selectData(state),
+    (currentState) => {
+      cb(previousState.items, currentState.items);
+      previousState = currentState;
+    }
+  );
+};
+
+// src/mcp-integration/classes-resource.ts
+var GLOBAL_CLASSES_URI = "elementor://global-classes";
+var STORAGE_KEY = "elementor-global-classes";
+var updateLocalStorageCache = () => {
+  const classes = selectOrderedClasses(getState5());
+  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({
@@ -2443,17 +2769,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(
@@ -2472,7 +2805,7 @@ var ClassManagerButton = () => {
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
-            openPanel();
+            toggleClassesManagerPanel();
             trackGlobalClassesButton();
             prefetchClassesUsage();
           }
@@ -2534,52 +2867,28 @@ function createClassName(prefix) {
 
 // src/components/global-styles-import-listener.tsx
 import { useEffect as useEffect5 } from "react";
+import { GLOBAL_STYLES_IMPORTED_EVENT } from "@elementor/editor-canvas";
 import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
-  const dispatch5 = useDispatch2();
+  const dispatch7 = useDispatch2();
   useEffect5(() => {
     const handleGlobalStylesImported = (event) => {
       const importedClasses = event.detail?.global_classes;
       if (importedClasses?.items && importedClasses?.order) {
-        dispatch5(
-          slice.actions.load({
-            preview: {
-              items: importedClasses.items,
-              order: importedClasses.order
-            },
-            frontend: {
-              items: importedClasses.items,
-              order: importedClasses.order
-            }
+        const { items } = importedClasses;
+        dispatch7(
+          slice.actions.mergeExistingClasses({
+            preview: items,
+            frontend: items
           })
         );
       }
-      Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(([previewRes, frontendRes]) => {
-        const { data: previewData } = previewRes;
-        const { data: frontendData } = frontendRes;
-        dispatch5(
-          slice.actions.load({
-            preview: {
-              items: previewData.data,
-              order: previewData.meta.order
-            },
-            frontend: {
-              items: frontendData.data,
-              order: frontendData.meta.order
-            }
-          })
-        );
-      }).catch(() => {
-      });
     };
-    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
+      window.removeEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
-  }, [dispatch5]);
+  }, [dispatch7]);
   return null;
 }
 
@@ -2614,29 +2923,14 @@ function OpenPanelFromUrl() {
 
 // src/components/populate-store.tsx
 import { useEffect as useEffect7 } from "react";
-import { __useDispatch as useDispatch3 } from "@elementor/store";
+import { registerDataHook } from "@elementor/editor-v1-adapters";
 function PopulateStore() {
-  const dispatch5 = useDispatch3();
   useEffect7(() => {
-    Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
-      ([previewRes, frontendRes]) => {
-        const { data: previewData } = previewRes;
-        const { data: frontendData } = frontendRes;
-        dispatch5(
-          slice.actions.load({
-            preview: {
-              items: previewData.data,
-              order: previewData.meta.order
-            },
-            frontend: {
-              items: frontendData.data,
-              order: frontendData.meta.order
-            }
-          })
-        );
-      }
-    );
-  }, [dispatch5]);
+    loadCurrentDocumentClasses();
+    registerDataHook("after", "editor/documents/attach-preview", async () => {
+      await loadCurrentDocumentClasses();
+    });
+  }, []);
   return null;
 }
 
@@ -2716,7 +3010,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 - 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, retreive the id from the list, available at uri elementor://global-classes
+If the user want to unapply a class by it's name and not ID, retrieve the id from the list, available at uri elementor://global-classes
 </note>
 `,
     handler: async (params) => {
@@ -2740,7 +3034,7 @@ function initMcpApplyGetGlobalClassUsages(reg) {
     usages: z2.array(
       z2.object({
         classId: z2.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'
+          'The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'
         ),
         usages: z2.array(
           z2.object({
@@ -2759,13 +3053,13 @@ function initMcpApplyGetGlobalClassUsages(reg) {
       intelligencePriority: 0.6,
       speedPriority: 0.8
     },
-    description: `Retreive the usages of global-classes ACCROSS PAGES designed by Elementor editor.
+    description: `Retrieve the usages of global-classes ACROSS PAGES designed by Elementor editor.
 
-## Prequisites: CRITICAL
+## Prerequisites: CRITICAL
 - The list of global classes and their applid values is available at resource uri elementor://global-classes
 
 ## When to use this tool:
-- When a user requests to see where a specific global class is being used accross the site.
+- When a user requests to see where a specific global class is being used across 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.
 
@@ -3005,7 +3299,7 @@ async function attemptCreate(opts) {
     }
   ]);
   try {
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return newClassId;
   } catch {
     deleteClass2(newClassId);
@@ -3031,7 +3325,7 @@ async function attemptUpdate(opts) {
         state
       }
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     snapshot.forEach((style) => {
@@ -3040,7 +3334,7 @@ async function attemptUpdate(opts) {
         variants: style.variants
       });
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return false;
   }
 }
@@ -3060,7 +3354,7 @@ async function attemptDelete(opts) {
   }
   try {
     deleteClass2(classId);
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     return false;
@@ -3087,13 +3381,13 @@ 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";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
-import { registerDataHook } from "@elementor/editor-v1-adapters";
-import { __getState as getState4, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
+import { registerDataHook as registerDataHook2 } from "@elementor/editor-v1-adapters";
+import { __getState as getState6, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -3118,7 +3412,7 @@ function triggerSave(panelActions, context2 = "preview") {
   if (pendingSave) {
     return pendingSave;
   }
-  const promise = saveGlobalClasses({
+  const promise = saveGlobalClasses2({
     context: context2,
     onApprove: panelActions?.open
   });
@@ -3129,7 +3423,7 @@ function triggerSave(panelActions, context2 = "preview") {
   return promise;
 }
 function bindSaveAction(panelActions) {
-  registerDataHook("dependency", "document/save/save", (args) => {
+  registerDataHook2("dependency", "document/save/save", (args) => {
     triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
     return true;
   });
@@ -3145,16 +3439,20 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty(getState4());
+  return selectIsDirty(getState6());
 }
 
 // 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;
 }
@@ -3162,7 +3460,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",
@@ -3180,10 +3480,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
@@ -3202,7 +3504,11 @@ function init() {
   );
 }
 export {
+  ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI,
-  init
+  addDocumentClasses,
+  createLabelsForClasses,
+  init,
+  loadExistingClasses
 };
 //# sourceMappingURL=index.mjs.map