@elementor/editor-global-classes 0.14.1 → 0.15.4

package/dist/index.js

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -21,32 +25,40 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  init: () => init
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store16 = require("@elementor/store");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_store20 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React8 = __toESM(require("react"));
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_ui7 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
 var React7 = __toESM(require("react"));
 var import_react4 = require("react");
-var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
 var import_query = require("@elementor/query");
 var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/hooks/use-dirty-state.ts
 var import_store2 = require("@elementor/store");
@@ -195,31 +207,60 @@ var ClassManagerIntroduction = () => {
     import_editor_ui.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n.__)("CSS Class manager", "elementor"),
-      image: {
-        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
-        alt: (0, import_i18n.__)("Class manager screenshot", "elementor")
-      },
-      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      title: (0, import_i18n.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
         }
         setShouldShowIntroduction(false);
       }
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_ui.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(import_ui.Box, { padding: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "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(import_ui.Box, { p: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+    "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(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
-    "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
+var import_editor_documents = require("@elementor/editor-documents");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store6 = require("@elementor/store");
+var isDeleted = false;
+var deleteClass = (id2) => {
+  (0, import_store6.__dispatch)(slice.actions.delete(id2));
+  isDeleted = true;
+};
+var onDelete = async () => {
+  await reloadDocument();
+  isDeleted = false;
+};
+var hasDeletedItems = () => isDeleted;
+var reloadDocument = () => {
+  const currentDocument = (0, import_editor_documents.getCurrentDocument)();
+  const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
+  documentsManager.invalidateCache();
+  return (0, import_editor_v1_adapters.__privateRunCommand)("editor/documents/switch", {
+    id: currentDocument?.id,
+    shouldScroll: false,
+    shouldNavigateToDefaultRoute: false
+  });
+};
+
 // src/components/class-manager/flipped-color-swatch-icon.tsx
 var React2 = __toESM(require("react"));
 var import_icons = require("@elementor/icons");
@@ -230,68 +271,9 @@ var React5 = __toESM(require("react"));
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
+var import_store12 = require("@elementor/store");
 var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-
-// src/global-classes-styles-provider.ts
-var import_editor_styles2 = require("@elementor/editor-styles");
-var import_store6 = require("@elementor/store");
-var import_i18n2 = require("@wordpress/i18n");
-var MAX_CLASSES = 50;
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  limit: MAX_CLASSES,
-  actions: {
-    get: () => selectOrderedClasses((0, import_store6.__getState)()),
-    getById: (id2) => selectClass((0, import_store6.__getState)(), id2),
-    create: (label) => {
-      const classes = selectGlobalClasses((0, import_store6.__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_store6.__dispatch)(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants: []
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      (0, import_store6.__dispatch)(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      (0, import_store6.__dispatch)(slice.actions.delete(id2));
-    },
-    setOrder: (order) => {
-      (0, import_store6.__dispatch)(slice.actions.setOrder(order));
-    },
-    updateProps: (args) => {
-      (0, import_store6.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    }
-  },
-  subscribe: (cb) => (0, import_store6.__subscribeWithSelector)((state) => state.globalClasses, cb),
-  labels: {
-    singular: (0, import_i18n2.__)("Global class", "elementor"),
-    plural: (0, import_i18n2.__)("Global CSS classes", "elementor")
-  }
-};
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
 var import_store8 = require("@elementor/store");
@@ -310,7 +292,7 @@ var React3 = __toESM(require("react"));
 var import_react2 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var context = (0, import_react2.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react2.useState)(null);
@@ -326,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(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
+  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n2.__)("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n2.__)(
     "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(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n2.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react2.useContext)(context);
@@ -406,13 +388,21 @@ var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
+  const dispatch4 = (0, import_store12.__useDispatch)();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(import_ui4.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,
@@ -428,9 +418,10 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
+  const dispatch4 = (0, import_store12.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    globalClassesStylesProvider.actions.setOrder(newIds);
+    dispatch4(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
@@ -480,7 +471,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
       {
         placement: "top",
         className: "class-item-more-actions",
-        title: (0, import_i18n4.__)("More actions", "elementor")
+        title: (0, import_i18n3.__)("More actions", "elementor")
       },
       /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
     )
@@ -506,7 +497,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n3.__)("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       import_editor_ui2.MenuListItem,
@@ -516,7 +507,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n4.__)("Delete", "elementor"))
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n3.__)("Delete", "elementor"))
     )
   ));
 };
@@ -545,7 +536,7 @@ var StyledListItemButton = (0, import_ui4.styled)(import_ui4.ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.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" }, (0, import_i18n4.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.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" }, (0, import_i18n3.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)(
   "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"
 )));
@@ -576,15 +567,23 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  if (!import_editor_styles_repository.stylesRepository.isLabelValid(newLabel)) {
-    return (0, import_i18n4.__)("Format is not valid", "elementor");
-  }
-  if (import_editor_styles_repository.stylesRepository.isLabelExist(newLabel)) {
-    return (0, import_i18n4.__)("Existing name", "elementor");
+  const result = (0, import_editor_styles_repository.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
 var React6 = __toESM(require("react"));
 var import_react3 = require("react");
@@ -623,14 +622,12 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters.changeEditMode)(id);
-    return (0, import_editor_documents.getDocumentModifiedStatus)();
+    (0, import_editor_v1_adapters2.changeEditMode)(id);
+    blockPanelInteractions();
   },
-  onClose: (documentModifiedState) => {
-    (0, import_editor_v1_adapters.changeEditMode)("edit");
-    if ((0, import_editor_documents.getDocumentModifiedStatus)() !== documentModifiedState) {
-      (0, import_editor_documents.setDocumentModifiedStatus)(documentModifiedState);
-    }
+  onClose: () => {
+    (0, import_editor_v1_adapters2.changeEditMode)("edit");
+    unblockPanelInteractions();
   }
 });
 function ClassManagerPanel() {
@@ -639,10 +636,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(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n4.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
+      disabled: isPublishing,
       onClose: () => {
         if (isDirty2) {
           openSaveChangesDialog();
@@ -662,17 +660,17 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n5.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    (0, import_i18n4.__)("Save changes", "elementor")
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n4.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n4.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n4.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n5.__)("Cancel", "elementor"),
+          label: (0, import_i18n4.__)("Cancel", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n4.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -681,10 +679,10 @@ function ClassManagerPanel() {
         }
       }
     }
-  ))));
+  )));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons6.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   (0, import_react4.useEffect)(() => {
@@ -700,13 +698,12 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  const document = (0, import_editor_documents.__useActiveDocument)();
-  const [initialDocumentStatus] = (0, import_react4.useState)(document?.isDirty ?? false);
   return (0, import_query.useMutation)({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
-    onSuccess: () => {
-      if (initialDocumentStatus !== document?.isDirty) {
-        (0, import_editor_documents.setDocumentModifiedStatus)(initialDocumentStatus);
+    onSuccess: async () => {
+      (0, import_editor_documents2.setDocumentModifiedStatus)(false);
+      if (hasDeletedItems()) {
+        await onDelete();
       }
     }
   });
@@ -714,9 +711,9 @@ var usePublish = () => {
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents2.__useActiveDocument)();
+  const document = (0, import_editor_documents3.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
-  const { save: saveDocument } = (0, import_editor_documents2.__useActiveDocumentActions)();
+  const { save: saveDocument } = (0, import_editor_documents3.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const handleOpenPanel = () => {
     if (document?.isDirty) {
@@ -725,19 +722,19 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
-    "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(import_ui7.Tooltip, { title: (0, import_i18n5.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n5.__)(
+    "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n6.__)("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React8.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n6.__)("Keep editing", "elementor"),
+          label: (0, import_i18n5.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n6.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -751,51 +748,109 @@ var ClassManagerButton = () => {
 
 // src/components/populate-store.tsx
 var import_react5 = require("react");
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch3 = (0, import_store12.__useDispatch)();
+  const dispatch4 = (0, import_store14.__useDispatch)();
   (0, import_react5.useEffect)(() => {
     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
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_store16 = require("@elementor/store");
+var import_i18n6 = require("@wordpress/i18n");
+var MAX_CLASSES = 50;
+var globalClassesStylesProvider = (0, import_editor_styles_repository2.createStylesProvider)({
+  key: "global-classes",
+  priority: 30,
+  limit: MAX_CLASSES,
+  labels: {
+    singular: (0, import_i18n6.__)("class", "elementor"),
+    plural: (0, import_i18n6.__)("classes", "elementor")
+  },
+  subscribe: (cb) => (0, import_store16.__subscribeWithSelector)((state) => state.globalClasses, cb),
+  actions: {
+    all: () => selectOrderedClasses((0, import_store16.__getState)()),
+    get: (id2) => selectClass((0, import_store16.__getState)(), id2),
+    create: (label) => {
+      const classes = selectGlobalClasses((0, import_store16.__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_store16.__dispatch)(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      (0, import_store16.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      (0, import_store16.__dispatch)(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      (0, import_store16.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  }
+});
+
 // src/sync-with-document-save.ts
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_store14 = require("@elementor/store");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_store18 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store14.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store18.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
-    (0, import_editor_documents3.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters2.registerDataHook)("after", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters3.registerDataHook)("after", "document/save/save", (args) => {
     return saveGlobalClasses({
       context: args.status === "publish" ? "frontend" : "preview"
     });
   });
 }
 function isDirty() {
-  return selectIsDirty((0, import_store14.__getState)());
+  return selectIsDirty((0, import_store18.__getState)());
 }
 
 // src/init.ts
 function init() {
-  (0, import_store16.__registerSlice)(slice);
+  (0, import_store20.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository2.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository3.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -804,11 +859,12 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }
-
-// src/index.ts
-init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init
+});
 //# sourceMappingURL=index.js.map