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

package/dist/index.js

@@ -30,32 +30,35 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ClassManagerPanelEmbedded: () => ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI: () => GLOBAL_CLASSES_URI,
-  init: () => init
+  addDocumentClasses: () => addDocumentClasses,
+  createLabelsForClasses: () => createLabelsForClasses,
+  init: () => init,
+  loadExistingClasses: () => loadExistingClasses
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/global-classes-styles-provider.ts
-var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store4 = require("@elementor/store");
-var import_i18n = require("@wordpress/i18n");
-
-// src/capabilities.ts
+// src/components/class-manager/class-manager-panel.tsx
+var React19 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@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 = (0, import_editor_v1_adapters.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
-    };
-  }
-};
+var import_icons11 = require("@elementor/icons");
+var import_query2 = require("@elementor/query");
+var import_store18 = require("@elementor/store");
+var import_ui16 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+
+// src/hooks/use-classes-order.ts
+var import_store2 = require("@elementor/store");
+
+// src/store.ts
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -72,10 +75,6 @@ var GlobalClassTrackingError = (0, import_utils.createError)({
   message: "Error tracking global classes event."
 });
 
-// src/store.ts
-var import_editor_styles = require("@elementor/editor-styles");
-var import_store = require("@elementor/store");
-
 // src/utils/snapshot-history.ts
 function createLink({ value, next, prev }) {
   return {
@@ -140,6 +139,7 @@ var SnapshotHistory = class _SnapshotHistory {
 var localHistory = SnapshotHistory.get("global-classes");
 var initialState = {
   data: { items: {}, order: [] },
+  classLabels: {},
   initialData: {
     frontend: { items: {}, order: [] },
     preview: { items: {}, order: [] }
@@ -152,17 +152,19 @@ var slice = (0, import_store.__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 }) {
@@ -171,6 +173,7 @@ var slice = (0, import_store.__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 }) {
@@ -192,6 +195,7 @@ var slice = (0, import_store.__createSlice)({
       localHistory.next(state.data);
       Object.entries(payload).forEach(([id2, { modified }]) => {
         state.data.items[id2].label = modified;
+        state.classLabels[id2] = modified;
       });
       state.isDirty = false;
     },
@@ -207,9 +211,14 @@ var slice = (0, import_store.__createSlice)({
       let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
       customCss = customCss?.raw ? customCss : null;
       if (variant) {
-        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 {
@@ -251,6 +260,28 @@ var slice = (0, import_store.__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;
+        }
+      });
     }
   }
 });
@@ -270,388 +301,47 @@ 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 = (0, import_store.__createSelector)(selectData, ({ order }) => order);
 var selectGlobalClasses = (0, import_store.__createSelector)(selectData, ({ items }) => items);
 var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
 var selectOrderedClasses = (0, import_store.__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 = (0, import_store.__createSelector)(
   selectData,
   ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
 );
-
-// src/utils/tracking.ts
-var import_events = require("@elementor/events");
-var import_store2 = require("@elementor/store");
-
-// src/api.ts
-var import_http_client = require("@elementor/http-client");
-var RESOURCE_URL = "/global-classes";
-var BASE_URL = "elementor/v1";
-var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
-var apiClient = {
-  usage: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
-  all: (context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, {
-    params: { context: context2 }
-  }),
-  publish: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "frontend"
-    }
-  }),
-  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "preview"
-    }
-  })
-};
-var API_ERROR_CODES = {
-  DUPLICATED_LABEL: "DUPLICATED_LABEL"
-};
-
-// src/components/css-class-usage/utils.ts
-var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
-  acc[key] = {
-    content: value || [],
-    total: value.reduce((total, val) => total + (val?.total || 0), 0)
-  };
-  return acc;
-}, {});
-
-// service/css-class-usage-service.ts
-var fetchCssClassUsage = async () => {
-  const response = await apiClient.usage();
-  return transformData(response?.data?.data || {});
-};
-
-// src/utils/tracking.ts
-var trackGlobalClasses = async (payload) => {
-  const { runAction } = payload;
-  const data = await getSanitizedData(payload);
-  if (data) {
-    track(data);
-    if (data.event === "classCreated" && "classId" in data) {
-      fireClassApplied(data.classId);
-    }
-  }
-  runAction?.();
-};
-var fireClassApplied = async (classId) => {
-  const appliedInfo = await getAppliedInfo(classId);
-  track({
-    event: "classApplied",
-    classId,
-    ...appliedInfo,
-    totalInstancesAfterApply: 1
-  });
-};
-var getSanitizedData = async (payload) => {
-  switch (payload.event) {
-    case "classApplied":
-      if ("classId" in payload && payload.classId) {
-        const appliedInfo = await getAppliedInfo(payload.classId);
-        return { ...payload, ...appliedInfo };
-      }
-      break;
-    case "classRemoved":
-      if ("classId" in payload && payload.classId) {
-        const deleteInfo = getRemovedInfo(payload.classId);
-        return { ...payload, ...deleteInfo };
-      }
-      break;
-    case "classDeleted":
-      if ("classId" in payload && payload.classId) {
-        const deleteInfo = await trackDeleteClass(payload.classId);
-        return { ...payload, ...deleteInfo };
-      }
-      break;
-    case "classCreated":
-      if ("source" in payload && payload.source !== "created") {
-        if ("classId" in payload && payload.classId) {
-          return { ...payload, classTitle: getCssClass(payload.classId).label };
-        }
-      }
-      return payload;
-    case "classStateClicked":
-      if ("classId" in payload && payload.classId) {
-        return { ...payload, classTitle: getCssClass(payload.classId).label };
-      }
-      break;
-    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 } = (0, import_events.getMixpanel)();
-  if (!config?.names?.global_classes?.[data.event]) {
-    console.error("Global class tracking event not found", { event: data.event });
-    return;
-  }
-  const name = config.names.global_classes[data.event];
-  const { event, ...eventData } = data;
-  try {
-    dispatchEvent?.(name, {
-      event,
-      ...eventData
-    });
-  } catch (error) {
-    throw new GlobalClassTrackingError({ cause: error });
-  }
-};
-var extractCssClassData = (classId) => {
-  const cssClass = getCssClass(classId);
-  const classTitle = cssClass.label;
-  return { classTitle };
-};
-var getCssClass = (classId) => {
-  const cssClass = selectClass((0, import_store2.__getState)(), classId);
-  if (!cssClass) {
-    throw new Error(`CSS class with ID ${classId} not found`);
-  }
-  return cssClass;
-};
-var trackDeleteClass = async (classId) => {
-  const totalInstances = await getTotalInstancesByCssClassID(classId);
-  const classTitle = getCssClass(classId).label;
-  return { totalInstances, classTitle };
-};
-var getTotalInstancesByCssClassID = async (classId) => {
-  const cssClassUsage = await fetchCssClassUsage();
-  return cssClassUsage[classId]?.total ?? 1;
-};
-var getAppliedInfo = async (classId) => {
-  const { classTitle } = extractCssClassData(classId);
-  const totalInstancesAfterApply = await getTotalInstancesByCssClassID(classId) + 1;
-  return { classTitle, totalInstancesAfterApply };
-};
-var getRemovedInfo = (classId) => {
-  const { classTitle } = extractCssClassData(classId);
-  return {
-    classTitle
-  };
-};
-
-// src/global-classes-styles-provider.ts
-var MAX_CLASSES = 100;
-var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
-var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
-var globalClassesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
-  key: GLOBAL_CLASSES_PROVIDER_KEY,
-  priority: 30,
-  limit: MAX_CLASSES,
-  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
-  labels: {
-    singular: (0, import_i18n.__)("class", "elementor"),
-    plural: (0, import_i18n.__)("classes", "elementor")
-  },
-  subscribe: (cb) => subscribeWithStates(cb),
-  capabilities: getCapabilities(),
-  actions: {
-    all: () => selectOrderedClasses((0, import_store4.__getState)()),
-    get: (id2) => selectClass((0, import_store4.__getState)(), id2),
-    resolveCssName: (id2) => {
-      return selectClass((0, import_store4.__getState)(), id2)?.label ?? id2;
-    },
-    create: (label, variants = []) => {
-      const classes = selectGlobalClasses((0, import_store4.__getState)());
-      const existingLabels = Object.values(classes).map((style) => style.label);
-      if (existingLabels.includes(label)) {
-        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
-      }
-      const existingIds = Object.keys(classes);
-      const id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
-      (0, import_store4.__dispatch)(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      (0, import_store4.__dispatch)(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      (0, import_store4.__dispatch)(slice.actions.delete(id2));
-    },
-    updateProps: (args) => {
-      (0, import_store4.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    },
-    updateCustomCss: (args) => {
-      (0, import_store4.__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((0, import_store4.__getState)());
-  return (0, import_store4.__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
-var import_editor = require("@elementor/editor");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_mcp = require("@elementor/editor-mcp");
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_store28 = require("@elementor/store");
-
-// src/components/class-manager/class-manager-button.tsx
-var React20 = __toESM(require("react"));
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_ui10 = require("@elementor/editor-ui");
-var import_ui17 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
-
-// src/hooks/use-prefetch-css-class-usage.ts
-var import_query = require("@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 = (0, import_query.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
-var React19 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons11 = require("@elementor/icons");
-var import_query3 = require("@elementor/query");
-var import_store20 = require("@elementor/store");
-var import_ui16 = require("@elementor/ui");
-var import_i18n15 = require("@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
-var import_store6 = require("@elementor/store");
 var useClassesOrder = () => {
-  return (0, import_store6.__useSelector)(selectOrder);
+  return (0, import_store2.__useSelector)(selectOrder);
 };
 
 // src/hooks/use-dirty-state.ts
-var import_store8 = require("@elementor/store");
+var import_store4 = require("@elementor/store");
 var useDirtyState = () => {
-  return (0, import_store8.__useSelector)(selectIsDirty);
+  return (0, import_store4.__useSelector)(selectIsDirty);
 };
 
 // src/hooks/use-filters.ts
@@ -660,7 +350,7 @@ var import_react3 = require("react");
 // src/components/search-and-filter/context.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_utils3 = require("@elementor/utils");
+var import_utils2 = require("@elementor/utils");
 var SearchAndFilterContext = (0, import_react.createContext)(void 0);
 var INIT_CHECKED_FILTERS = {
   empty: false,
@@ -677,7 +367,7 @@ var SearchAndFilterProvider = ({ children }) => {
     }
     return "";
   };
-  const { debouncedValue, inputValue, handleChange } = (0, import_utils3.useDebounceState)({
+  const { debouncedValue, inputValue, handleChange } = (0, import_utils2.useDebounceState)({
     delay: 300,
     initialValue: getInitialSearchValue()
   });
@@ -720,9 +410,59 @@ var import_react2 = require("react");
 var import_editor_documents = require("@elementor/editor-documents");
 
 // src/hooks/use-css-class-usage.ts
-var import_query2 = require("@elementor/query");
+var import_query = require("@elementor/query");
+
+// src/api.ts
+var import_http_client = require("@elementor/http-client");
+var RESOURCE_URL = "/global-classes";
+var BASE_URL = "elementor/v1";
+var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
+var RESOURCE_POST_URL = `${RESOURCE_URL}/post`;
+var RESOURCE_STYLES_URL = `${RESOURCE_URL}/styles`;
+function saveGlobalClasses(context2, payload) {
+  return (0, import_http_client.httpService)().put(`${BASE_URL}${RESOURCE_URL}`, payload, {
+    params: { context: context2 }
+  });
+}
+var apiClient = {
+  usage: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
+  all: (context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, {
+    params: { context: context2 }
+  }),
+  getStylesForPost: (postId, context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_POST_URL}`, {
+    params: { context: context2, post_id: postId }
+  }),
+  getStylesByIds: (ids, context2 = "preview") => (0, import_http_client.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
 var useCssClassUsage = () => {
-  return (0, import_query2.useQuery)({
+  return (0, import_query.useQuery)({
     queryKey: [QUERY_KEY],
     queryFn: fetchCssClassUsage,
     refetchOnMount: false,
@@ -731,12 +471,12 @@ var useCssClassUsage = () => {
 };
 
 // src/hooks/use-empty-css-class.ts
-var import_store10 = require("@elementor/store");
+var import_store6 = require("@elementor/store");
 var useEmptyCssClass = () => {
-  return (0, import_store10.__useSelector)(selectEmptyCssClass);
+  return (0, import_store6.__useSelector)(selectEmptyCssClass);
 };
 var useAllCssClassesIDs = () => {
-  const cssClasses = (0, import_store10.__useSelector)(selectGlobalClasses);
+  const cssClasses = (0, import_store6.__useSelector)(selectGlobalClasses);
   return Object.keys(cssClasses);
 };
 
@@ -813,7 +553,7 @@ var useFilters = () => {
 // src/save-global-classes.tsx
 var React3 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_store12 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 
 // src/components/class-manager/duplicate-label-dialog.tsx
@@ -821,7 +561,7 @@ var React2 = __toESM(require("react"));
 var import_editor_ui = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n = require("@wordpress/i18n");
 var DUP_PREFIX = "DUP_";
 var DuplicateLabelDialog = ({
   modifiedLabels,
@@ -832,7 +572,7 @@ var DuplicateLabelDialog = ({
     onApprove?.();
     (0, import_editor_ui.closeDialog)();
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui.DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(import_ui.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(import_ui.Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "subtitle1" }, (0, import_i18n2.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui.DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(import_ui.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(import_ui.Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "subtitle1" }, (0, import_i18n.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
     "Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix",
     "elementor"
   ), /* @__PURE__ */ React2.createElement("strong", null, " ", DUP_PREFIX)), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(
@@ -857,7 +597,7 @@ var DuplicateLabelDialog = ({
           minWidth: 0
         }
       },
-      (0, import_i18n2.__)("Before", "elementor")
+      (0, import_i18n.__)("Before", "elementor")
     ),
     /* @__PURE__ */ React2.createElement(
       import_ui.Typography,
@@ -872,7 +612,7 @@ var DuplicateLabelDialog = ({
           maxWidth: "200px"
         }
       },
-      (0, import_i18n2.__)("After", "elementor")
+      (0, import_i18n.__)("After", "elementor")
     )
   ), /* @__PURE__ */ React2.createElement(import_ui.Divider, { sx: { mt: 0.5, mb: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "column", gap: 0.5, sx: { pb: 2 } }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ React2.createElement(
     import_ui.Box,
@@ -910,26 +650,180 @@ var DuplicateLabelDialog = ({
       },
       /* @__PURE__ */ React2.createElement(import_editor_ui.EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2", sx: { color: "text.primary" } }, modified))
     )
-  ))), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(import_ui.Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n2.__)("Your designs and classes are safe.", "elementor")), (0, import_i18n2.__)(
+  ))), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(import_ui.Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n.__)("Your designs and classes are safe.", "elementor")), (0, import_i18n.__)(
     "Only the prefixes were added. Find them in Class Manager by searching",
     "elementor"
-  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, (0, import_i18n2.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui.closeDialog }, (0, import_i18n2.__)("Done", "elementor"))));
+  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, (0, import_i18n.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui.closeDialog }, (0, import_i18n.__)("Done", "elementor"))));
+};
+
+// src/utils/tracking.ts
+var import_events = require("@elementor/events");
+var import_store8 = require("@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 } = (0, import_events.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 = (0, import_store8.__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((0, import_store12.__getState)());
+async function saveGlobalClasses2({ context: context2, onApprove }) {
+  const state = selectData((0, import_store10.__getState)());
   const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
   const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
+  const changes = calculateChanges(state, currentContext((0, import_store10.__getState)()));
+  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((0, import_store12.__getState)()))
+    changes
   });
-  (0, import_store12.__dispatch)(slice.actions.reset({ context: context2 }));
+  (0, import_store10.__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) {
-    (0, import_store12.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    (0, import_store10.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
     trackGlobalClasses({
       event: "classPublishConflict",
       numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
@@ -948,19 +842,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 && (0, import_utils4.hash)(state.items[id2]) !== (0, import_utils4.hash)(initialData.items[id2]);
-    })
+    }),
+    order
   };
 }
 
 // src/components/search-and-filter/components/filter/active-filters.tsx
 var React6 = __toESM(require("react"));
 var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/search-and-filter/components/filter/clear-icon-button.tsx
 var React4 = __toESM(require("react"));
@@ -991,11 +889,11 @@ var CustomIconButton = (0, import_ui2.styled)(import_ui2.IconButton)(({ theme })
 // src/components/search-and-filter/components/filter/filter-list.tsx
 var React5 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var filterConfig = {
-  unused: (0, import_i18n3.__)("Unused", "elementor"),
-  empty: (0, import_i18n3.__)("Empty", "elementor"),
-  onThisPage: (0, import_i18n3.__)("On this page", "elementor")
+  unused: (0, import_i18n2.__)("Unused", "elementor"),
+  empty: (0, import_i18n2.__)("Empty", "elementor"),
+  onThisPage: (0, import_i18n2.__)("On this page", "elementor")
 };
 var FilterList = () => {
   const {
@@ -1078,7 +976,7 @@ var ActiveFilters = () => {
     ClearIconButton,
     {
       trigger: "header",
-      tooltipText: (0, import_i18n4.__)("Clear Filters", "elementor"),
+      tooltipText: (0, import_i18n3.__)("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -1099,7 +997,7 @@ var import_react4 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 var CssClassFilter = () => {
   const {
     filters: { filters }
@@ -1116,7 +1014,7 @@ var CssClassFilter = () => {
     }
   }, [popupState.isOpen]);
   const showCleanIcon = Object.values(filters).some((value) => value);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { title: (0, import_i18n5.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { title: (0, import_i18n4.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
     import_ui5.ToggleButton,
     {
       value: "filter",
@@ -1150,12 +1048,12 @@ var CssClassFilter = () => {
             {
               trigger: "menu",
               key: "clear-all-button",
-              tooltipText: (0, import_i18n5.__)("Clear all", "elementor")
+              tooltipText: (0, import_i18n4.__)("Clear all", "elementor")
             }
           )
         ] : [],
         onClose: popupState.close,
-        title: (0, import_i18n5.__)("Filters", "elementor"),
+        title: (0, import_i18n4.__)("Filters", "elementor"),
         icon: /* @__PURE__ */ React7.createElement(import_icons3.FilterIcon, { fontSize: "tiny" })
       }
     ),
@@ -1175,7 +1073,7 @@ var CssClassFilter = () => {
 var React8 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var ClassManagerSearch = () => {
   const {
     search: { inputValue, handleChange }
@@ -1192,7 +1090,7 @@ var ClassManagerSearch = () => {
           event: "classManagerSearched"
         });
       },
-      placeholder: (0, import_i18n6.__)("Search", "elementor"),
+      placeholder: (0, import_i18n5.__)("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
         startAdornment: /* @__PURE__ */ React8.createElement(import_ui6.InputAdornment, { position: "start" }, /* @__PURE__ */ React8.createElement(import_icons4.SearchIcon, { fontSize: "tiny" }))
@@ -1207,7 +1105,7 @@ var import_react5 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
@@ -1216,7 +1114,7 @@ var ClassManagerIntroduction = () => {
     import_editor_ui4.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n7.__)("Class Manager", "elementor"),
+      title: (0, import_i18n6.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -1236,24 +1134,24 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React9.createElement(import_ui7.Box, { p: 3 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
+  return /* @__PURE__ */ React9.createElement(import_ui7.Box, { p: 3 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "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(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
+  )), /* @__PURE__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "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
-var import_store14 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id2) => {
   trackGlobalClasses({
     event: "classDeleted",
     classId: id2,
     runAction: () => {
-      (0, import_store14.__dispatch)(slice.actions.delete(id2));
+      (0, import_store12.__dispatch)(slice.actions.delete(id2));
       isDeleted = true;
     }
   });
@@ -1271,24 +1169,25 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React10.creat
 // src/components/class-manager/global-classes-list.tsx
 var React17 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_store18 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 var import_ui14 = require("@elementor/ui");
-var import_i18n13 = require("@wordpress/i18n");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
-var import_store16 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store16.__useSelector)(selectOrderedClasses);
+  return (0, import_store14.__useSelector)(selectOrderedClasses);
 };
 
 // src/components/class-manager/class-item.tsx
 var React15 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var React11 = __toESM(require("react"));
@@ -1296,7 +1195,7 @@ var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/hooks/use-css-class-usage-by-id.ts
 var EMPTY_CLASS_USAGE = {
@@ -1312,23 +1211,23 @@ var useCssClassUsageByID = (id2) => {
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var iconMapper = {
   "wp-post": {
-    label: (0, import_i18n8.__)("Post", "elementor"),
+    label: (0, import_i18n7.__)("Post", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PostTypeIcon, { fontSize: "inherit" })
   },
   "wp-page": {
-    label: (0, import_i18n8.__)("Page", "elementor"),
+    label: (0, import_i18n7.__)("Page", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PagesIcon, { fontSize: "inherit" })
   },
   popup: {
-    label: (0, import_i18n8.__)("Popup", "elementor"),
+    label: (0, import_i18n7.__)("Popup", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PopupTemplateIcon, { fontSize: "inherit" })
   },
   header: {
-    label: (0, import_i18n8.__)("Header", "elementor"),
+    label: (0, import_i18n7.__)("Header", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.HeaderTemplateIcon, { fontSize: "inherit" })
   },
   footer: {
-    label: (0, import_i18n8.__)("Footer", "elementor"),
+    label: (0, import_i18n7.__)("Footer", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.FooterTemplateIcon, { fontSize: "inherit" })
   }
 };
@@ -1358,7 +1257,7 @@ var CssClassUsagePopover = ({
     import_editor_ui5.PopoverHeader,
     {
       icon: /* @__PURE__ */ React11.createElement(import_icons6.CurrentLocationIcon, { fontSize: "tiny" }),
-      title: /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { "aria-label": "header-title" }, (0, import_i18n8.__)("Locator", "elementor")), /* @__PURE__ */ React11.createElement(import_ui8.Box, null, /* @__PURE__ */ React11.createElement(import_ui8.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      title: /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { "aria-label": "header-title" }, (0, import_i18n7.__)("Locator", "elementor")), /* @__PURE__ */ React11.createElement(import_ui8.Box, null, /* @__PURE__ */ React11.createElement(import_ui8.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
       onClose
     }
   ), /* @__PURE__ */ React11.createElement(import_ui8.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_ui5.PopoverBody, { width: 300 }, /* @__PURE__ */ React11.createElement(
@@ -1439,7 +1338,7 @@ var React12 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const {
     data: { total },
@@ -1520,9 +1419,9 @@ var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React12.createElem
   {
     disableInteractive: true,
     placement: "top",
-    title: `${(0, import_i18n9.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+    title: `${(0, import_i18n8.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
       "{{locations}}",
-      total === 1 ? (0, import_i18n9.__)("location", "elementor") : (0, import_i18n9.__)("locations", "elementor")
+      total === 1 ? (0, import_i18n8.__)("location", "elementor") : (0, import_i18n8.__)("locations", "elementor")
     )}`
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
@@ -1533,7 +1432,7 @@ var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
     disableInteractive: true,
     placement: "top",
     color: "secondary",
-    content: /* @__PURE__ */ React12.createElement(import_editor_ui6.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n9.__)("This class isn\u2019t being used yet.", "elementor"))
+    content: /* @__PURE__ */ React12.createElement(import_editor_ui6.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n8.__)("This class isn\u2019t being used yet.", "elementor"))
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
 );
@@ -1543,7 +1442,7 @@ var React13 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui10 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 var context = (0, import_react6.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react6.useState)(null);
@@ -1564,14 +1463,14 @@ var DeleteClassDialog = ({ label, id: id2 }) => {
     closeDialog2();
     deleteClass(id2);
   };
-  const text = total && content.length ? (0, import_i18n10.__)(
+  const text = total && content.length ? (0, import_i18n9.__)(
     "Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.",
     "elementor"
-  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, import_i18n10.__)(
+  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, import_i18n9.__)(
     "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(import_editor_ui7.ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n10.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
+  return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n9.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n9.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react6.useContext)(context);
@@ -1585,9 +1484,17 @@ var useDeleteConfirmation = () => {
 var React14 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(import_ui11.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(
+  import_ui11.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(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, ...props }) => {
+var SortableItem = ({ children, id: id2, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     import_ui11.UnstableSortableItem,
     {
@@ -1608,7 +1515,7 @@ var SortableItem = ({ children, id: id2, ...props }) => {
           import_ui11.Box,
           {
             ...itemProps,
-            style: itemStyle,
+            style: { ...itemStyle, ...!isDragOverlay ? style : null },
             component: "li",
             role: "listitem",
             sx: {
@@ -1712,7 +1619,7 @@ var ClassItem = ({
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n11.__)("More actions", "elementor")
+          title: (0, import_i18n10.__)("More actions", "elementor")
         },
         /* @__PURE__ */ React15.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
       )
@@ -1739,7 +1646,7 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n10.__)("Rename", "elementor"))
     ),
     onToggleSync && /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
@@ -1749,7 +1656,7 @@ var ClassItem = ({
           onToggleSync(id2, !syncToV3);
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(import_icons9.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(import_icons9.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n11.__)("Sync to Global Fonts", "elementor")))
+      /* @__PURE__ */ React15.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(import_icons9.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(import_icons9.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n10.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n10.__)("Sync to Global Fonts", "elementor")))
     ),
     /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
@@ -1759,7 +1666,7 @@ var ClassItem = ({
           openDialog2({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n11.__)("Delete", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n10.__)("Delete", "elementor"))
     )
   ));
 };
@@ -1814,7 +1721,7 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository2.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -1825,7 +1732,7 @@ var validateLabel = (newLabel) => {
 var React16 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+var import_i18n11 = require("@wordpress/i18n");
 var getNotFoundType = (searchValue, filters, filteredClasses) => {
   const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
   const filterNotFound = filters && filters.length === 0;
@@ -1843,18 +1750,18 @@ var getNotFoundType = (searchValue, filters, filteredClasses) => {
 };
 var notFound = {
   filterAndSearch: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched.", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Clear your input and try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear your input and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched that search.", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Clear the filters and try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear the filters and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
   }
 };
@@ -1927,38 +1834,65 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
     )
   ),
   /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
-  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui13.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui13.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("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 = (0, import_store18.__useDispatch)();
+  const dispatch7 = (0, import_store16.__useDispatch)();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = (0, import_react8.useState)(null);
   const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
+  const virtualizer = (0, import_react_virtual.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((0, import_react_virtual.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);
+    }
+  });
   (0, import_react8.useEffect)(() => {
     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);
   }
@@ -1968,69 +1902,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(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
-    SortableProvider,
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(
+    import_ui14.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(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n13.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n13.__)(
+var EmptyState = () => /* @__PURE__ */ React17.createElement(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n12.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n12.__)(
   "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"
 )));
@@ -2040,10 +1999,10 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch5 = (0, import_store18.__useDispatch)();
+  const dispatch7 = (0, import_store16.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch5(slice.actions.setOrder(newIds));
+    dispatch7(slice.actions.setOrder(newIds));
     if (draggedItemId) {
       trackGlobalClasses({
         event: "classManagerReorder",
@@ -2096,7 +2055,7 @@ function unblockPanelInteractions() {
 var React18 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
 var StartSyncToV3Modal = ({
   externalOpen,
@@ -2128,7 +2087,7 @@ var StartSyncToV3Modal = ({
     onConfirm?.();
     onExternalClose?.();
   };
-  return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n14.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n14.__)(
+  return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n13.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n13.__)(
     "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(import_ui15.DialogActions, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
@@ -2141,53 +2100,89 @@ var StartSyncToV3Modal = ({
           onChange: (e) => setShouldShowAgain(!e.target.checked)
         }
       ),
-      label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n14.__)("Don't show again", "elementor"))
+      label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n13.__)("Don't show again", "elementor"))
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n14.__)("Sync to Global Fonts", "elementor")))));
+  ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n13.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n13.__)("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 = (0, import_editor_documents3.getCurrentDocument)();
-  const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
-  documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters2.__privateRunCommand)("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 } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(id);
+    (0, import_editor_v1_adapters.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
-    await reloadDocument();
+    (0, import_editor_v1_adapters.changeEditMode)("edit");
+    await (0, import_editor_documents3.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 = (0, import_react10.useMemo)(
+    () => embedded ? onRequestClose ?? (async () => {
+    }) : closeStandalonePanel,
+    [embedded, onRequestClose, closeStandalonePanel]
+  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react10.useState)(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = (0, import_react10.useState)(null);
   const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  const [scrollElement, setScrollElement] = (0, import_react10.useState)(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
+  const handleClosePanel = (0, import_react10.useCallback)(() => {
+    if (isDirty2) {
+      openSaveChangesDialog();
+      return;
+    }
+    void closePanel();
+  }, [isDirty2, openSaveChangesDialog, closePanel]);
+  (0, import_react10.useEffect)(() => {
+    if (!embedded || !onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  (0, import_react10.useEffect)(() => {
+    if (!embedded) {
+      return;
+    }
+    blockPanelInteractions();
+    return () => {
+      unblockPanelInteractions();
+    };
+  }, [embedded]);
   const handleStopSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store20.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2199,7 +2194,7 @@ function ClassManagerPanel() {
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store20.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2221,49 +2216,29 @@ function ClassManagerPanel() {
     [isStopSyncSuppressed, handleStopSync]
   );
   usePreventUnload();
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n15.__)("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(
-    import_editor_panels.PanelBody,
+  const searchFiltersBlock = /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { 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(
+    import_ui16.Box,
     {
+      ref: setScrollElement,
+      px: 2,
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
+        flexGrow: 1,
+        overflowY: "auto",
+        ...embedded ? { minHeight: 0 } : {}
       }
     },
-    /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
     /* @__PURE__ */ React19.createElement(
-      import_ui16.Box,
+      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(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
+  );
+  const saveFooter = /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
     import_ui16.Button,
     {
       fullWidth: true,
@@ -2274,8 +2249,9 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n15.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+    (0, import_i18n14.__)("Save changes", "elementor")
+  ));
+  const dialogs = /* @__PURE__ */ React19.createElement(React19.Fragment, null, startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2290,30 +2266,84 @@ function ClassManagerPanel() {
       onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSync(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n15.__)("Discard", "elementor"),
+          label: (0, import_i18n14.__)("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n15.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
-            closePanel();
+            void closePanel();
           }
         }
       }
     }
   )));
+  const classManagerLayout = embedded ? /* @__PURE__ */ React19.createElement(
+    import_ui16.Stack,
+    {
+      direction: "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
+    listArea,
+    saveFooter
+  ) : /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
+    ClassPanelCloseButton,
+    {
+      disabled: isPublishing,
+      onClose: () => {
+        if (isDirty2) {
+          openSaveChangesDialog();
+          return;
+        }
+        void closeStandalonePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React19.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
+    listArea
+  ), saveFooter);
+  const core = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.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(import_editor_ui9.ThemeProvider, null, core);
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(import_icons11.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n15.__)("Something went wrong", "elementor"))));
+var ClassPanelCloseButton = ({ onClose, sx, ...props }) => /* @__PURE__ */ React19.createElement(
+  import_ui16.IconButton,
+  {
+    size: "small",
+    color: "secondary",
+    onClick: onClose,
+    "aria-label": "Close",
+    sx: { marginLeft: "auto", ...sx },
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement(import_icons11.XIcon, { fontSize: "small" })
+);
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   (0, import_react10.useEffect)(() => {
@@ -2329,8 +2359,8 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  return (0, import_query3.useMutation)({
-    mutationFn: () => saveGlobalClasses({ context: "frontend" }),
+  return (0, import_query2.useMutation)({
+    mutationFn: () => saveGlobalClasses2({ context: "frontend" }),
     onSuccess: async () => {
       (0, import_editor_documents3.setDocumentModifiedStatus)(false);
       if (hasDeletedItems()) {
@@ -2352,7 +2382,7 @@ var TotalCssClassCounter = () => {
 };
 var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n15.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n15.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n15.__)(
+  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n14.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n14.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n14.__)(
     "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
     "elementor"
   ))), /* @__PURE__ */ React19.createElement(
@@ -2360,15 +2390,313 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
     {
       onClose,
       onConfirm,
-      cancelLabel: (0, import_i18n15.__)("Cancel", "elementor"),
-      confirmLabel: (0, import_i18n15.__)("Got it", "elementor"),
+      cancelLabel: (0, import_i18n14.__)("Cancel", "elementor"),
+      confirmLabel: (0, import_i18n14.__)("Got it", "elementor"),
       color: "primary",
       onSuppressMessage: suppressStopSyncMessage,
-      suppressLabel: (0, import_i18n15.__)("Don't show again", "elementor")
+      suppressLabel: (0, import_i18n14.__)("Don't show again", "elementor")
     }
   ));
 };
 
+// src/mcp-integration/classes-resource.ts
+var import_store26 = require("@elementor/store");
+
+// src/global-classes-styles-provider.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_store24 = require("@elementor/store");
+var import_i18n15 = require("@wordpress/i18n");
+
+// src/capabilities.ts
+var import_editor_v1_adapters2 = require("@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 = (0, import_editor_v1_adapters2.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
+var import_store22 = require("@elementor/store");
+
+// src/load-document-classes.ts
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_store20 = require("@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) {
+  (0, import_store20.__dispatch)(
+    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 = (0, import_editor_documents4.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);
+  (0, import_store20.__dispatch)(
+    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);
+  (0, import_store20.__dispatch)(
+    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((0, import_store22.__getState)());
+  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);
+  (0, import_store22.__dispatch)(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 = (0, import_editor_styles_repository2.createStylesProvider)({
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
+  priority: 30,
+  limit: MAX_CLASSES,
+  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
+  labels: {
+    singular: (0, import_i18n15.__)("class", "elementor"),
+    plural: (0, import_i18n15.__)("classes", "elementor")
+  },
+  subscribe: (cb) => subscribeWithStates(cb),
+  capabilities: getCapabilities(),
+  actions: {
+    all: () => selectOrderedClasses((0, import_store24.__getState)()),
+    get: (id2) => {
+      const state = (0, import_store24.__getState)();
+      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 = (0, import_store24.__getState)();
+      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((0, import_store24.__getState)()));
+      const existingLabels = existingClasses.map(([, classLabel]) => classLabel);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      const existingIds = existingClasses.map(([existingId]) => existingId);
+      if (!id2) {
+        id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
+      }
+      (0, import_store24.__dispatch)(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      (0, import_store24.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      (0, import_store24.__dispatch)(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      (0, import_store24.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      (0, import_store24.__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((0, import_store24.__getState)());
+  return (0, import_store24.__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((0, import_store26.__getState)());
+  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
+var import_editor = require("@elementor/editor");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_store32 = require("@elementor/store");
+
+// src/components/class-manager/class-manager-button.tsx
+var React20 = __toESM(require("react"));
+var import_editor_documents5 = require("@elementor/editor-documents");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_ui17 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+
+// src/hooks/use-prefetch-css-class-usage.ts
+var import_query3 = require("@elementor/query");
+function usePrefetchCssClassUsage() {
+  const queryClient = (0, import_query3.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({
@@ -2377,9 +2705,9 @@ var trackGlobalClassesButton = () => {
   });
 };
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents4.__useActiveDocument)();
+  const document = (0, import_editor_documents5.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
-  const { save: saveDocument } = (0, import_editor_documents4.__useActiveDocumentActions)();
+  const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui10.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
@@ -2387,17 +2715,24 @@ var ClassManagerButton = () => {
   if (!isUserAllowedToUpdateClass) {
     return null;
   }
+  const toggleClassesManagerPanel = () => {
+    if ((0, import_editor_v1_adapters3.isExperimentActive)("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(import_ui17.Tooltip, { title: (0, import_i18n16.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n16.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n16.__)(
@@ -2416,7 +2751,7 @@ var ClassManagerButton = () => {
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
-            openPanel();
+            toggleClassesManagerPanel();
             trackGlobalClassesButton();
             prefetchClassesUsage();
           }
@@ -2478,58 +2813,34 @@ function createClassName(prefix) {
 
 // src/components/global-styles-import-listener.tsx
 var import_react11 = require("react");
-var import_store22 = require("@elementor/store");
+var import_editor_canvas = require("@elementor/editor-canvas");
+var import_store28 = require("@elementor/store");
 function GlobalStylesImportListener() {
-  const dispatch5 = (0, import_store22.__useDispatch)();
+  const dispatch7 = (0, import_store28.__useDispatch)();
   (0, import_react11.useEffect)(() => {
     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(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
+      window.removeEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
-  }, [dispatch5]);
+  }, [dispatch7]);
   return null;
 }
 
 // src/components/open-panel-from-url.tsx
 var import_react12 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
@@ -2542,7 +2853,7 @@ function OpenPanelFromUrl() {
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2558,29 +2869,14 @@ function OpenPanelFromUrl() {
 
 // src/components/populate-store.tsx
 var import_react13 = require("react");
-var import_store24 = require("@elementor/store");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function PopulateStore() {
-  const dispatch5 = (0, import_store24.__useDispatch)();
   (0, import_react13.useEffect)(() => {
-    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();
+    (0, import_editor_v1_adapters5.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+      await loadCurrentDocumentClasses();
+    });
+  }, []);
   return null;
 }
 
@@ -2660,7 +2956,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) => {
@@ -2684,7 +2980,7 @@ function initMcpApplyGetGlobalClassUsages(reg) {
     usages: import_schema2.z.array(
       import_schema2.z.object({
         classId: import_schema2.z.string().describe(
-          'The ID of the class, not visible to the user. To retreive the name of the class, use the "list-global-classes" tool'
+          'The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'
         ),
         usages: import_schema2.z.array(
           import_schema2.z.object({
@@ -2703,13 +2999,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.
 
@@ -2748,7 +3044,7 @@ function initMcpApplyGetGlobalClassUsages(reg) {
 }
 
 // src/mcp-integration/mcp-manage-global-classes.ts
-var import_editor_canvas = require("@elementor/editor-canvas");
+var import_editor_canvas2 = require("@elementor/editor-canvas");
 var import_editor_props = require("@elementor/editor-props");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_schema3 = require("@elementor/schema");
@@ -2908,8 +3204,8 @@ var initManageGlobalClasses = (reg) => {
     name: "manage-global-classes",
     requiredResources: [
       { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: import_editor_canvas.STYLE_SCHEMA_URI, description: "Style schema resources" },
-      { uri: import_editor_canvas.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
+      { uri: import_editor_canvas2.STYLE_SCHEMA_URI, description: "Style schema resources" },
+      { uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
     ],
     modelPreferences: {
       intelligencePriority: 0.85,
@@ -2949,7 +3245,7 @@ async function attemptCreate(opts) {
     }
   ]);
   try {
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return newClassId;
   } catch {
     deleteClass2(newClassId);
@@ -2975,7 +3271,7 @@ async function attemptUpdate(opts) {
         state
       }
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     snapshot.forEach((style) => {
@@ -2984,7 +3280,7 @@ async function attemptUpdate(opts) {
         variants: style.variants
       });
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return false;
   }
 }
@@ -3004,7 +3300,7 @@ async function attemptDelete(opts) {
   }
   try {
     deleteClass2(classId);
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     return false;
@@ -3031,13 +3327,13 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 
 // src/sync-with-document.tsx
 var import_react14 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
-var import_editor_documents5 = require("@elementor/editor-documents");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_store26 = require("@elementor/store");
+var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_store30 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -3046,11 +3342,11 @@ function syncWithDocumentSave(panelActions) {
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store26.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store30.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
-    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents6.setDocumentModifiedStatus)(true);
   });
 }
 function triggerSave(panelActions, context2 = "preview") {
@@ -3062,7 +3358,7 @@ function triggerSave(panelActions, context2 = "preview") {
   if (pendingSave) {
     return pendingSave;
   }
-  const promise = saveGlobalClasses({
+  const promise = saveGlobalClasses2({
     context: context2,
     onApprove: panelActions?.open
   });
@@ -3073,7 +3369,7 @@ function triggerSave(panelActions, context2 = "preview") {
   return promise;
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "document/save/save", (args) => {
     triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
     return true;
   });
@@ -3089,24 +3385,30 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty((0, import_store26.__getState)());
+  return selectIsDirty((0, import_store30.__getState)());
 }
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
-  const panelActions = usePanelActions();
+  const { open: openClassPanel } = usePanelActions();
   (0, import_react14.useEffect)(() => {
-    (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
-      syncWithDocumentSave(panelActions);
+    const unsubscribe = (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
+      const open = (0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel") ? () => {
+        window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
+      } : openClassPanel;
+      syncWithDocumentSave({ open });
     });
+    return unsubscribe;
   }, []);
   return null;
 }
 
 // src/init.ts
 function init() {
-  (0, import_store28.__registerSlice)(slice);
-  (0, import_editor_panels2.__registerPanel)(panel);
+  (0, import_store32.__registerSlice)(slice);
+  if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
+    (0, import_editor_panels2.__registerPanel)(panel);
+  }
   import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
@@ -3124,10 +3426,12 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  (0, import_editor.injectIntoLogic)({
-    id: "global-classes-open-panel-from-url",
-    component: OpenPanelFromUrl
-  });
+  if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
+    (0, import_editor.injectIntoLogic)({
+      id: "global-classes-open-panel-from-url",
+      component: OpenPanelFromUrl
+    });
+  }
   (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
@@ -3147,7 +3451,11 @@ function init() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI,
-  init
+  addDocumentClasses,
+  createLabelsForClasses,
+  init,
+  loadExistingClasses
 });
 //# sourceMappingURL=index.js.map