@elementor/editor-global-classes 4.1.0-830 → 4.1.0-832

package/dist/index.js

@@ -32,7 +32,10 @@ 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);
 
@@ -136,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: [] }
@@ -148,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 }) {
@@ -167,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 }) {
@@ -188,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;
     },
@@ -252,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;
+        }
+      });
     }
   }
 });
@@ -271,22 +301,37 @@ 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)
 );
+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 useClassesOrder = () => {
@@ -372,21 +417,26 @@ 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 }
   }),
-  publish: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "frontend"
-    }
+  getStylesForPost: (postId, context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_POST_URL}`, {
+    params: { context: context2, post_id: postId }
   }),
-  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "preview"
-    }
-  })
+  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"
@@ -723,15 +773,20 @@ var extractCssClassData = (classId) => {
   return { classTitle };
 };
 var getCssClass = (classId) => {
-  const cssClass = selectClass((0, import_store8.__getState)(), classId);
-  if (!cssClass) {
-    throw new Error(`CSS class with ID ${classId} not found`);
+  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);
   }
-  return cssClass;
+  throw new Error(`CSS class with ID ${classId} not found`);
 };
 var trackDeleteClass = async (classId) => {
-  const totalInstances = await getTotalInstancesByCssClassID(classId);
   const classTitle = getCssClass(classId).label;
+  const totalInstances = await getTotalInstancesByCssClassID(classId);
   return { totalInstances, classTitle };
 };
 var getTotalInstancesByCssClassID = async (classId) => {
@@ -751,14 +806,19 @@ var getRemovedInfo = (classId) => {
 };
 
 // src/save-global-classes.tsx
-async function saveGlobalClasses({ context: context2, onApprove }) {
+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_store10.__getState)()))
+    changes
   });
   (0, import_store10.__dispatch)(slice.actions.reset({ context: context2 }));
   window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
@@ -782,12 +842,16 @@ 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
   };
 }
 
@@ -1786,7 +1850,7 @@ var GlobalClassesList = ({
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch5 = (0, import_store16.__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 ?? "";
@@ -1818,17 +1882,17 @@ var GlobalClassesList = ({
         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);
   }
@@ -1885,7 +1949,7 @@ var GlobalClassesList = ({
                   newValue: newLabel,
                   source: "class-manager"
                 });
-                dispatch5(
+                dispatch7(
                   slice.actions.update({
                     style: {
                       id: cssClass.id,
@@ -1908,7 +1972,7 @@ var GlobalClassesList = ({
                 } else if (newValue && onStartSyncRequest) {
                   onStartSyncRequest(id2);
                 } else {
-                  dispatch5(
+                  dispatch7(
                     slice.actions.update({
                       style: {
                         id: id2,
@@ -1935,10 +1999,10 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch5 = (0, import_store16.__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",
@@ -2296,7 +2360,7 @@ var usePreventUnload = () => {
 };
 var usePublish = () => {
   return (0, import_query2.useMutation)({
-    mutationFn: () => saveGlobalClasses({ context: "frontend" }),
+    mutationFn: () => saveGlobalClasses2({ context: "frontend" }),
     onSuccess: async () => {
       (0, import_editor_documents3.setDocumentModifiedStatus)(false);
       if (hasDeletedItems()) {
@@ -2335,10 +2399,13 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   ));
 };
 
+// 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_store20 = require("@elementor/store");
+var import_store24 = require("@elementor/store");
 var import_i18n15 = require("@wordpress/i18n");
 
 // src/capabilities.ts
@@ -2357,10 +2424,112 @@ var getCapabilities = () => {
   }
 };
 
+// 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 = 100;
+var MAX_CLASSES = 5e3;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
-var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
+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,
@@ -2373,21 +2542,38 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
   subscribe: (cb) => subscribeWithStates(cb),
   capabilities: getCapabilities(),
   actions: {
-    all: () => selectOrderedClasses((0, import_store20.__getState)()),
-    get: (id2) => selectClass((0, import_store20.__getState)(), id2),
+    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) => {
-      return selectClass((0, import_store20.__getState)(), id2)?.label ?? 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 classes = selectGlobalClasses((0, import_store20.__getState)());
-      const existingLabels = Object.values(classes).map((style) => style.label);
+      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-", Object.keys(classes));
+        id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
       }
-      (0, import_store20.__dispatch)(
+      (0, import_store24.__dispatch)(
         slice.actions.add({
           id: id2,
           type: "class",
@@ -2398,17 +2584,17 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
       return id2;
     },
     update: (payload) => {
-      (0, import_store20.__dispatch)(
+      (0, import_store24.__dispatch)(
         slice.actions.update({
           style: payload
         })
       );
     },
     delete: (id2) => {
-      (0, import_store20.__dispatch)(slice.actions.delete(id2));
+      (0, import_store24.__dispatch)(slice.actions.delete(id2));
     },
     updateProps: (args) => {
-      (0, import_store20.__dispatch)(
+      (0, import_store24.__dispatch)(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -2418,7 +2604,7 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
       );
     },
     updateCustomCss: (args) => {
-      (0, import_store20.__dispatch)(
+      (0, import_store24.__dispatch)(
         slice.actions.updateProps({
           id: args.id,
           meta: args.meta,
@@ -2435,12 +2621,12 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
   }
 });
 var subscribeWithStates = (cb) => {
-  let previousState = selectData((0, import_store20.__getState)());
-  return (0, import_store20.__subscribeWithSelector)(
-    (state) => state.globalClasses,
+  let previousState = selectData((0, import_store24.__getState)());
+  return (0, import_store24.__subscribeWithSelector)(
+    (state) => selectData(state),
     (currentState) => {
-      cb(previousState.items, currentState.data.items);
-      previousState = currentState.data;
+      cb(previousState.items, currentState.items);
+      previousState = currentState;
     }
   );
 };
@@ -2449,7 +2635,7 @@ var subscribeWithStates = (cb) => {
 var GLOBAL_CLASSES_URI = "elementor://global-classes";
 var STORAGE_KEY = "elementor-global-classes";
 var updateLocalStorageCache = () => {
-  const classes = globalClassesStylesProvider.actions.all();
+  const classes = selectOrderedClasses((0, import_store26.__getState)());
   localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
 };
 var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
@@ -2483,12 +2669,12 @@ 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_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store28 = require("@elementor/store");
+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_documents4 = require("@elementor/editor-documents");
+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");
@@ -2519,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)();
@@ -2628,49 +2814,27 @@ function createClassName(prefix) {
 // src/components/global-styles-import-listener.tsx
 var import_react11 = require("react");
 var import_editor_canvas = require("@elementor/editor-canvas");
-var import_store22 = require("@elementor/store");
+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(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
       window.removeEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
-  }, [dispatch5]);
+  }, [dispatch7]);
   return null;
 }
 
@@ -2705,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;
 }
 
@@ -3096,7 +3245,7 @@ async function attemptCreate(opts) {
     }
   ]);
   try {
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return newClassId;
   } catch {
     deleteClass2(newClassId);
@@ -3122,7 +3271,7 @@ async function attemptUpdate(opts) {
         state
       }
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     snapshot.forEach((style) => {
@@ -3131,7 +3280,7 @@ async function attemptUpdate(opts) {
         variants: style.variants
       });
     });
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return false;
   }
 }
@@ -3151,7 +3300,7 @@ async function attemptDelete(opts) {
   }
   try {
     deleteClass2(classId);
-    await saveGlobalClasses({ context: "frontend" });
+    await saveGlobalClasses2({ context: "frontend" });
     return true;
   } catch {
     return false;
@@ -3178,13 +3327,13 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 
 // src/sync-with-document.tsx
 var import_react14 = require("react");
-var import_editor_v1_adapters6 = 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_adapters5 = 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();
@@ -3193,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") {
@@ -3209,7 +3358,7 @@ function triggerSave(panelActions, context2 = "preview") {
   if (pendingSave) {
     return pendingSave;
   }
-  const promise = saveGlobalClasses({
+  const promise = saveGlobalClasses2({
     context: context2,
     onApprove: panelActions?.open
   });
@@ -3220,7 +3369,7 @@ function triggerSave(panelActions, context2 = "preview") {
   return promise;
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters5.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;
   });
@@ -3236,15 +3385,15 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty((0, import_store26.__getState)());
+  return selectIsDirty((0, import_store30.__getState)());
 }
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const { open: openClassPanel } = usePanelActions();
   (0, import_react14.useEffect)(() => {
-    const unsubscribe = (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
-      const open = (0, import_editor_v1_adapters6.isExperimentActive)("e_editor_design_system_panel") ? () => {
+    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 });
@@ -3256,8 +3405,8 @@ function SyncWithDocumentSave() {
 
 // src/init.ts
 function init() {
-  (0, import_store28.__registerSlice)(slice);
-  if (!(0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_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);
@@ -3277,7 +3426,7 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  if (!(0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel")) {
+  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
@@ -3304,6 +3453,9 @@ function init() {
 0 && (module.exports = {
   ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI,
-  init
+  addDocumentClasses,
+  createLabelsForClasses,
+  init,
+  loadExistingClasses
 });
 //# sourceMappingURL=index.js.map