@elementor/editor-global-classes 0.14.1 → 0.15.4

package/dist/index.mjs

@@ -2,27 +2,23 @@
 import { injectIntoLogic } from "@elementor/editor";
 import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
 import * as React8 from "react";
 import {
-  __useActiveDocument as useActiveDocument2,
+  __useActiveDocument as useActiveDocument,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
 import * as React7 from "react";
-import { useEffect, useState as useState4 } from "react";
-import {
-  __useActiveDocument as useActiveDocument,
-  getDocumentModifiedStatus,
-  setDocumentModifiedStatus
-} from "@elementor/editor-documents";
+import { useEffect } from "react";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
   Panel,
@@ -36,7 +32,7 @@ import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { XIcon } from "@elementor/icons";
 import { useMutation } from "@elementor/query";
 import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/hooks/use-dirty-state.ts
 import { __useSelector as useSelector } from "@elementor/store";
@@ -180,7 +176,7 @@ import * as React from "react";
 import { useState } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
-import { Box, Typography } from "@elementor/ui";
+import { Box, Image, Typography } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
@@ -190,31 +186,60 @@ var ClassManagerIntroduction = () => {
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __("CSS Class manager", "elementor"),
-      image: {
-        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
-        alt: __("Class manager screenshot", "elementor")
-      },
-      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      title: __("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
         }
         setShouldShowIntroduction(false);
       }
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        sx: { width: "100%", aspectRatio: "16 / 9" },
+        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+        alt: ""
+      }
+    ),
+    /* @__PURE__ */ React.createElement(IntroductionContent, null)
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(Box, { padding: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
-    "The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
+  return /* @__PURE__ */ React.createElement(Box, { p: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+    "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__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
-    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
+    "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
 };
 
+// src/components/class-manager/delete-class.ts
+import { getCurrentDocument, getV1DocumentsManager } from "@elementor/editor-documents";
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+import { __dispatch as dispatch2 } from "@elementor/store";
+var isDeleted = false;
+var deleteClass = (id2) => {
+  dispatch2(slice.actions.delete(id2));
+  isDeleted = true;
+};
+var onDelete = async () => {
+  await reloadDocument();
+  isDeleted = false;
+};
+var hasDeletedItems = () => isDeleted;
+var reloadDocument = () => {
+  const currentDocument = getCurrentDocument();
+  const documentsManager = getV1DocumentsManager();
+  documentsManager.invalidateCache();
+  return runCommand("editor/documents/switch", {
+    id: currentDocument?.id,
+    shouldScroll: false,
+    shouldNavigateToDefaultRoute: false
+  });
+};
+
 // src/components/class-manager/flipped-color-swatch-icon.tsx
 import * as React2 from "react";
 import { ColorSwatchIcon } from "@elementor/icons";
@@ -222,9 +247,10 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.create
 
 // src/components/class-manager/global-classes-list.tsx
 import * as React5 from "react";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
+import { __useDispatch as useDispatch } from "@elementor/store";
 import {
   bindMenu,
   bindTrigger,
@@ -239,71 +265,7 @@ import {
   Typography as Typography3,
   usePopupState
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-
-// src/global-classes-styles-provider.ts
-import { generateId } from "@elementor/editor-styles";
-import {
-  __dispatch as dispatch2,
-  __getState as getState2,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ as __2 } from "@wordpress/i18n";
-var MAX_CLASSES = 50;
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  limit: MAX_CLASSES,
-  actions: {
-    get: () => selectOrderedClasses(getState2()),
-    getById: (id2) => selectClass(getState2(), id2),
-    create: (label) => {
-      const classes = selectGlobalClasses(getState2());
-      const existingLabels = Object.values(classes).map((style) => style.label);
-      if (existingLabels.includes(label)) {
-        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
-      }
-      const existingIds = Object.keys(classes);
-      const id2 = generateId("g-", existingIds);
-      dispatch2(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants: []
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      dispatch2(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      dispatch2(slice.actions.delete(id2));
-    },
-    setOrder: (order) => {
-      dispatch2(slice.actions.setOrder(order));
-    },
-    updateProps: (args) => {
-      dispatch2(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    }
-  },
-  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
-  labels: {
-    singular: __2("Global class", "elementor"),
-    plural: __2("Global CSS classes", "elementor")
-  }
-};
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
@@ -330,7 +292,7 @@ import {
   DialogTitle,
   Typography as Typography2
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 var context = createContext(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = useState2(null);
@@ -346,13 +308,13 @@ var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
   const onConfirm = () => {
-    globalClassesStylesProvider.actions.delete(id2);
+    deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
+  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __2("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __2("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __2(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __2("Not now", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __2("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext(context);
@@ -431,13 +393,21 @@ var SortableItemIndicator = styled(Box2)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
+  const dispatch4 = useDispatch();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
     const renameClass = (newLabel) => {
-      globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
+      dispatch4(
+        slice.actions.update({
+          style: {
+            id: id2,
+            label: newLabel
+          }
+        })
+      );
     };
     return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
@@ -453,9 +423,10 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
+  const dispatch4 = useDispatch();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    globalClassesStylesProvider.actions.setOrder(newIds);
+    dispatch4(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
@@ -505,7 +476,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
       {
         placement: "top",
         className: "class-item-more-actions",
-        title: __4("More actions", "elementor")
+        title: __3("More actions", "elementor")
       },
       /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
     )
@@ -531,7 +502,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __3("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       MenuListItem,
@@ -541,7 +512,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __4("Delete", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __3("Delete", "elementor"))
     )
   ));
 };
@@ -570,7 +541,7 @@ var StyledListItemButton = styled2(ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __3("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __3(
   "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"
 )));
@@ -601,15 +572,23 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  if (!stylesRepository.isLabelValid(newLabel)) {
-    return __4("Format is not valid", "elementor");
-  }
-  if (stylesRepository.isLabelExist(newLabel)) {
-    return __4("Existing name", "elementor");
+  const result = validateStyleLabel(newLabel);
+  if (result.isValid) {
+    return null;
   }
-  return null;
+  return result.error;
 };
 
+// src/components/class-manager/panel-interactions.ts
+function blockPanelInteractions() {
+  const extendedWindow = window;
+  extendedWindow.$e?.components?.get?.("panel")?.blockUserInteractions?.();
+}
+function unblockPanelInteractions() {
+  const extendedWindow = window;
+  extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
+}
+
 // src/components/class-manager/save-changes-dialog.tsx
 import * as React6 from "react";
 import { useState as useState3 } from "react";
@@ -656,13 +635,11 @@ var { panel, usePanelActions } = createPanel({
   allowedEditModes: ["edit", id],
   onOpen: () => {
     changeEditMode(id);
-    return getDocumentModifiedStatus();
+    blockPanelInteractions();
   },
-  onClose: (documentModifiedState) => {
+  onClose: () => {
     changeEditMode("edit");
-    if (getDocumentModifiedStatus() !== documentModifiedState) {
-      setDocumentModifiedStatus(documentModifiedState);
-    }
+    unblockPanelInteractions();
   }
 });
 function ClassManagerPanel() {
@@ -671,10 +648,11 @@ function ClassManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __4("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
+      disabled: isPublishing,
       onClose: () => {
         if (isDirty2) {
           openSaveChangesDialog();
@@ -694,17 +672,17 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __5("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    __4("Save changes", "elementor")
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __4("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __4("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __4("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __5("Cancel", "elementor"),
+          label: __4("Cancel", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __5("Save & Continue", "elementor"),
+          label: __4("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -713,10 +691,10 @@ function ClassManagerPanel() {
         }
       }
     }
-  ))));
+  )));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(IconButton2, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __5("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __4("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect(() => {
@@ -732,13 +710,12 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  const document = useActiveDocument();
-  const [initialDocumentStatus] = useState4(document?.isDirty ?? false);
   return useMutation({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
-    onSuccess: () => {
-      if (initialDocumentStatus !== document?.isDirty) {
-        setDocumentModifiedStatus(initialDocumentStatus);
+    onSuccess: async () => {
+      setDocumentModifiedStatus(false);
+      if (hasDeletedItems()) {
+        await onDelete();
       }
     }
   });
@@ -746,7 +723,7 @@ var usePublish = () => {
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = useActiveDocument2();
+  const document = useActiveDocument();
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = useActiveDocumentActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
@@ -757,19 +734,19 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
-    "Save your changes before moving to the class manager to ensure all updates are applied and saved.",
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __5("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __5(
+    "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, __6("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React8.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __6("Keep editing", "elementor"),
+          label: __5("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __6("Save & Continue", "elementor"),
+          label: __5("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -783,18 +760,80 @@ var ClassManagerButton = () => {
 
 // src/components/populate-store.tsx
 import { useEffect as useEffect2 } from "react";
-import { __useDispatch as useDispatch } from "@elementor/store";
+import { __useDispatch as useDispatch2 } from "@elementor/store";
 function PopulateStore() {
-  const dispatch3 = useDispatch();
+  const dispatch4 = useDispatch2();
   useEffect2(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
-      dispatch3(slice.actions.init({ items: data, order: meta.order }));
+      dispatch4(slice.actions.init({ items: data, order: meta.order }));
     });
-  }, [dispatch3]);
+  }, [dispatch4]);
   return null;
 }
 
+// src/global-classes-styles-provider.ts
+import { generateId } from "@elementor/editor-styles";
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import {
+  __dispatch as dispatch3,
+  __getState as getState2,
+  __subscribeWithSelector as subscribeWithSelector
+} from "@elementor/store";
+import { __ as __6 } from "@wordpress/i18n";
+var MAX_CLASSES = 50;
+var globalClassesStylesProvider = createStylesProvider({
+  key: "global-classes",
+  priority: 30,
+  limit: MAX_CLASSES,
+  labels: {
+    singular: __6("class", "elementor"),
+    plural: __6("classes", "elementor")
+  },
+  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
+  actions: {
+    all: () => selectOrderedClasses(getState2()),
+    get: (id2) => selectClass(getState2(), id2),
+    create: (label) => {
+      const classes = selectGlobalClasses(getState2());
+      const existingLabels = Object.values(classes).map((style) => style.label);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      const existingIds = Object.keys(classes);
+      const id2 = generateId("g-", existingIds);
+      dispatch3(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      dispatch3(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      dispatch3(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      dispatch3(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  }
+});
+
 // src/sync-with-document-save.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
@@ -827,7 +866,7 @@ function isDirty() {
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository2.register(globalClassesStylesProvider);
+  stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -840,7 +879,7 @@ function init() {
     syncWithDocumentSave();
   });
 }
-
-// src/index.ts
-init();
+export {
+  init
+};
 //# sourceMappingURL=index.mjs.map