@elementor/editor-global-classes 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -2,17 +2,18 @@
 import { injectIntoLogic } from "@elementor/editor";
 import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { stylesRepository as stylesRepository2 } 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 React3 from "react";
+import * as React6 from "react";
 import { ColorSwatchIcon as ColorSwatchIcon2 } from "@elementor/icons";
-import { IconButton as IconButton2, Tooltip } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
-import * as React2 from "react";
+import * as React5 from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -21,24 +22,77 @@ import {
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { ColorSwatchIcon, XIcon } from "@elementor/icons";
-import { Alert, Box, ErrorBoundary, IconButton, Stack as Stack2 } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
+import { Alert, Box as Box4, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 
-// src/components/class-manager/global-classes-list.tsx
+// src/components/class-manager/class-manager-introduction.tsx
 import * as React from "react";
-import { EllipsisWithTooltip } from "@elementor/editor-ui";
-import { List, ListItemButton, Stack, Typography } from "@elementor/ui";
+import { useState } from "react";
+import { useSuppressedMessage } from "@elementor/editor-current-user";
+import { IntroductionModal } from "@elementor/editor-ui";
+import { Box, Image, Stack, Typography } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var MESSAGE_KEY = "global-class-manager-4";
+var ClassManagerIntroduction = () => {
+  const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = useState(!isMessageSuppressed);
+  return /* @__PURE__ */ React.createElement(
+    IntroductionModal,
+    {
+      open: shouldShowIntroduction,
+      title: __("CSS Class manager"),
+      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      handleClose: (shouldShowAgain) => {
+        if (!shouldShowAgain) {
+          suppressMessage();
+        }
+        setShouldShowIntroduction(false);
+      }
+    }
+  );
+};
+var IntroductionContent = () => {
+  return /* @__PURE__ */ React.createElement(Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(Box, null, /* @__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.",
+    "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.",
+    "elementor"
+  ))));
+};
 
-// src/store.ts
-import { mergeProps } from "@elementor/editor-props";
+// src/components/class-manager/global-classes-list.tsx
+import * as React4 from "react";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { EditableField, EllipsisWithTooltip, useEditable } from "@elementor/editor-ui";
+import { DotsVerticalIcon, PhotoIcon } from "@elementor/icons";
 import {
-  getVariantByMeta
-} from "@elementor/editor-styles";
+  bindMenu,
+  bindTrigger,
+  Box as Box3,
+  IconButton,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack as Stack2,
+  styled as styled2,
+  Tooltip,
+  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 {
-  __createSelector as createSelector,
-  __createSlice as createSlice,
-  __useSelector as useSelector
+  __dispatch as dispatch,
+  __getState as getState,
+  __subscribeWithSelector as subscribeWithSelector
 } from "@elementor/store";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/errors.ts
 import { createError } from "@elementor/utils";
@@ -46,11 +100,25 @@ var GlobalClassNotFoundError = createError({
   code: "global_class_not_found",
   message: "Global class not found."
 });
+var GlobalClassLabelAlreadyExistsError = createError({
+  code: "global_class_label_already_exists",
+  message: "Class with this name already exists."
+});
 
 // src/store.ts
+import { mergeProps } from "@elementor/editor-props";
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice,
+  __useSelector as useSelector
+} from "@elementor/store";
 var initialState = {
   items: {},
-  order: []
+  order: [],
+  isDirty: false
 };
 var SLICE_NAME = "globalClasses";
 var slice = createSlice({
@@ -60,14 +128,29 @@ var slice = createSlice({
     init(state, { payload }) {
       state.items = payload.items;
       state.order = payload.order;
+      state.isDirty = false;
     },
     add(state, { payload }) {
-      state.items[payload.style.id] = payload.style;
-      state.order = payload.order;
+      state.items[payload.id] = payload;
+      state.order.unshift(payload.id);
+      state.isDirty = true;
+    },
+    delete(state, { payload }) {
+      state.items = Object.fromEntries(Object.entries(state.items).filter(([id]) => id !== payload));
+      state.order = state.order.filter((id) => id !== payload);
+      state.isDirty = true;
+    },
+    setOrder(state, { payload }) {
+      state.order = payload;
     },
     update(state, { payload }) {
-      state.items[payload.style.id] = payload.style;
-      state.order = payload.order;
+      const style = state.items[payload.style.id];
+      const mergedData = {
+        ...style,
+        ...payload.style
+      };
+      state.items[payload.style.id] = mergedData;
+      state.isDirty = true;
     },
     updateProps(state, {
       payload
@@ -82,51 +165,395 @@ var slice = createSlice({
       } else {
         style.variants.push({ meta: payload.meta, props: payload.props });
       }
+      state.isDirty = true;
+    },
+    setPristine(state) {
+      state.isDirty = false;
     }
   }
 });
-var selectItems = (state) => state[SLICE_NAME].items;
 var selectOrder = (state) => state[SLICE_NAME].order;
+var selectGlobalClasses = (state) => state[SLICE_NAME].items;
 var selectOrderedGlobalClasses = createSelector(
-  selectItems,
+  selectGlobalClasses,
   selectOrder,
   (items, order) => order.map((id) => items[id])
 );
 var selectClass = (state, id) => state[SLICE_NAME].items[id] ?? null;
+var selectIsDirty = (state) => state.globalClasses.isDirty;
 var useOrderedGlobalClasses = () => {
   const items = useSelector(selectOrderedGlobalClasses);
   return items;
 };
+var useGlobalClassesOrder = () => useSelector(selectOrder);
+
+// src/global-classes-styles-provider.ts
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  actions: {
+    get: () => selectOrderedGlobalClasses(getState()),
+    getById: (id) => selectClass(getState(), id),
+    create: (label) => {
+      const classes = selectGlobalClasses(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 id = generateId("g-", existingIds);
+      dispatch(
+        slice.actions.add({
+          id,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id;
+    },
+    update: (payload) => {
+      dispatch(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      dispatch(slice.actions.delete(id));
+    },
+    setOrder: (order) => {
+      dispatch(slice.actions.setOrder(order));
+    },
+    updateProps: (args) => {
+      dispatch(
+        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")
+  }
+};
+
+// src/components/class-manager/delete-confirmation-dialog.tsx
+import * as React2 from "react";
+import { createContext, useContext, useState as useState2 } from "react";
+import { AlertOctagonFilledIcon } from "@elementor/icons";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography as Typography2
+} from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+var context = createContext(null);
+var DeleteConfirmationProvider = ({ children }) => {
+  const [dialogProps, setDialogProps] = useState2(null);
+  const openDialog = (props) => {
+    setDialogProps(props);
+  };
+  const closeDialog = () => {
+    setDialogProps(null);
+  };
+  return /* @__PURE__ */ React2.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React2.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+};
+var TITLE_ID = "delete-class-dialog";
+var DeleteConfirmationDialog = ({ label, id }) => {
+  const { closeDialog } = useDeleteConfirmation();
+  const onConfirm = () => {
+    globalClassesStylesProvider.actions.delete(id);
+    closeDialog();
+  };
+  return /* @__PURE__ */ React2.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete global class", "elementor")), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React2.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
+    "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
+    "elementor"
+  ))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
+};
+var useDeleteConfirmation = () => {
+  const contextValue = useContext(context);
+  if (!contextValue) {
+    throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
+  }
+  return contextValue;
+};
+
+// src/components/class-manager/sortable.tsx
+import * as React3 from "react";
+import { GripVerticalIcon } from "@elementor/icons";
+import {
+  Box as Box2,
+  Paper,
+  styled,
+  UnstableSortableItem,
+  UnstableSortableProvider
+} from "@elementor/ui";
+var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React3.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React3.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id }) => {
+  return /* @__PURE__ */ React3.createElement(
+    UnstableSortableItem,
+    {
+      id,
+      render: ({
+        itemProps,
+        isDragged,
+        triggerProps,
+        itemStyle,
+        triggerStyle,
+        dropIndicationStyle,
+        showDropIndication
+      }) => {
+        return /* @__PURE__ */ React3.createElement(StyledSortableItem, { ...itemProps, elevation: 0, sx: itemStyle, role: "listitem" }, /* @__PURE__ */ React3.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children({
+          itemProps,
+          isDragged,
+          triggerProps,
+          itemStyle,
+          triggerStyle,
+          dropIndicationStyle,
+          showDropIndication
+        }));
+      }
+    }
+  );
+};
+var StyledSortableItem = styled(Paper)`
+	position: relative;
+
+	&:hover {
+		& .class-item-sortable-trigger {
+			visibility: visible;
+		}
+	}
+
+	& .class-item-sortable-trigger {
+		visibility: hidden;
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translate( -75%, -50% );
+	}
+`;
+var SortableItemIndicator = styled(Box2)`
+	width: 100%;
+	height: 3px;
+	border-radius: ${({ theme }) => theme.spacing(0.5)};
+	background-color: ${({ theme }) => theme.palette.text.primary};
+`;
 
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = () => {
   const cssClasses = useOrderedGlobalClasses();
-  return /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(List, { role: "list" }, cssClasses?.map(({ id, label }) => {
-    return /* @__PURE__ */ React.createElement(Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(EllipsisWithTooltip, { title: label, as: Typography, variant: "caption" })));
-  })));
+  const [classesOrder, reorderClasses] = useClassesOrder();
+  if (!cssClasses?.length) {
+    return /* @__PURE__ */ React4.createElement(EmptyState, null);
+  }
+  return /* @__PURE__ */ React4.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React4.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React4.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id, label }) => {
+    const renameClass = (newLabel) => {
+      globalClassesStylesProvider.actions.update({ label: newLabel, id });
+    };
+    return /* @__PURE__ */ React4.createElement(SortableItem, { key: id, id }, ({ isDragged, showDropIndication, dropIndicationStyle }) => /* @__PURE__ */ React4.createElement(
+      ClassItem,
+      {
+        id,
+        label,
+        renameClass,
+        selected: isDragged
+      },
+      showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+    ));
+  }))));
+};
+var useClassesOrder = () => {
+  const order = useGlobalClassesOrder();
+  const reorder = (newIds) => {
+    globalClassesStylesProvider.actions.setOrder(newIds);
+  };
+  return [order, reorder];
+};
+var ClassItem = ({
+  id,
+  label,
+  renameClass,
+  selected,
+  children
+}) => {
+  const {
+    ref: editableRef,
+    openEditMode,
+    isEditing,
+    error,
+    getProps: getEditableProps
+  } = useEditable({
+    value: label,
+    onSubmit: renameClass,
+    validation: validateLabel
+  });
+  const { openDialog } = useDeleteConfirmation();
+  const popupState = usePopupState({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  return /* @__PURE__ */ React4.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React4.createElement(
+    StyledListItem,
+    {
+      component: "div",
+      disablePadding: true,
+      disableGutters: true,
+      secondaryAction: /* @__PURE__ */ React4.createElement(
+        Tooltip,
+        {
+          placement: "top",
+          className: "class-item-more-actions",
+          title: __4("More actions", "elementor")
+        },
+        /* @__PURE__ */ React4.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React4.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
+      )
+    },
+    /* @__PURE__ */ React4.createElement(
+      ListItemButton,
+      {
+        dense: true,
+        disableGutters: true,
+        shape: "rounded",
+        onDoubleClick: openEditMode,
+        selected: selected || popupState.isOpen,
+        focusVisibleClassName: "visible-class-item",
+        sx: {
+          minHeight: "36px",
+          display: "flex",
+          "&.visible-class-item": {
+            boxShadow: "none !important"
+          }
+        }
+      },
+      /* @__PURE__ */ React4.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React4.createElement(
+        EditableField,
+        {
+          ref: editableRef,
+          error,
+          as: Typography3,
+          variant: "caption",
+          ...getEditableProps()
+        }
+      ) : /* @__PURE__ */ React4.createElement(EllipsisWithTooltip, { title: label, as: Typography3, variant: "caption" }))
+    ),
+    children,
+    /* @__PURE__ */ React4.createElement(
+      Menu,
+      {
+        ...bindMenu(popupState),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        MenuItem,
+        {
+          sx: { minWidth: "160px" },
+          onClick: () => {
+            popupState.close();
+            openEditMode();
+          }
+        },
+        /* @__PURE__ */ React4.createElement(ListItemText, { primary: __4("Rename", "elementor") })
+      ),
+      /* @__PURE__ */ React4.createElement(
+        MenuItem,
+        {
+          onClick: () => {
+            popupState.close();
+            openDialog({ id, label });
+          }
+        },
+        /* @__PURE__ */ React4.createElement(ListItemText, { primary: __4("Delete", "elementor"), sx: { color: "error.light" } })
+      )
+    )
+  ));
+};
+var StyledListItem = styled2(ListItem)`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+var EmptyState = () => /* @__PURE__ */ React4.createElement(Stack2, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React4.createElement(PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React4.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("No CSS classes created yet", "elementor")), /* @__PURE__ */ React4.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
+  "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"
+)));
+var StyledHeader = styled2(Typography3)(({ theme, variant }) => ({
+  "&.MuiTypography-root": {
+    ...theme.typography[variant]
+  }
+}));
+var Indicator = styled2(Box3, {
+  shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
+})(({ theme, isActive, isError }) => ({
+  display: "flex",
+  width: "100%",
+  flexGrow: 1,
+  borderRadius: theme.spacing(0.5),
+  border: getIndicatorBorder({ isActive, isError, theme }),
+  padding: `0 ${theme.spacing(1)}`,
+  marginLeft: isActive ? theme.spacing(1) : 0
+}));
+var getIndicatorBorder = ({ isActive, isError, theme }) => {
+  if (isError) {
+    return `2px solid ${theme.palette.error.main}`;
+  }
+  if (isActive) {
+    return `2px solid ${theme.palette.secondary.main}`;
+  }
+  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");
+  }
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var { panel, usePanelActions, usePanelStatus } = createPanel({
+var { panel, usePanelActions } = createPanel({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(Panel, null, /* @__PURE__ */ React2.createElement(PanelHeader, null, /* @__PURE__ */ React2.createElement(Stack2, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(Panel, null, /* @__PURE__ */ React5.createElement(PanelHeader, null, /* @__PURE__ */ React5.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), __5("CSS Class manager")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
 }
 var CloseButton = (props) => {
   const { close } = usePanelActions();
-  return /* @__PURE__ */ React2.createElement(IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(XIcon, { fontSize: "small" }));
+  return /* @__PURE__ */ React5.createElement(IconButton2, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(XIcon, { fontSize: "small" }));
 };
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, __("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, __5("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React3.createElement(Tooltip, { title: __2("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(IconButton2, { onClick: open }, /* @__PURE__ */ React3.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React6.createElement(Tooltip2, { title: __6("Class manager"), placement: "top" }, /* @__PURE__ */ React6.createElement(IconButton3, { onClick: open }, /* @__PURE__ */ React6.createElement(ColorSwatchIcon2, { fontSize: "tiny" })));
 };
 
-// src/components/logic-hooks.tsx
+// src/components/populate-store.tsx
 import { useEffect } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
 
@@ -134,19 +561,12 @@ import { __useDispatch as useDispatch } from "@elementor/store";
 import { httpService } from "@elementor/http";
 var RESOURCE_URL = "/global-classes";
 var apiClient = {
-  all: async () => {
-    return httpService().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return httpService().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return httpService().put(`${RESOURCE_URL}/${id}`, data);
-  }
+  all: () => httpService().get("elementor/v1" + RESOURCE_URL),
+  update: (payload) => httpService().put("elementor/v1" + RESOURCE_URL, payload)
 };
 
-// src/components/logic-hooks.tsx
-function LogicHooks() {
+// src/components/populate-store.tsx
+function PopulateStore() {
   const dispatch2 = useDispatch();
   useEffect(() => {
     apiClient.all().then((res) => {
@@ -157,73 +577,55 @@ function LogicHooks() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-import {
-  __dispatch as dispatch,
-  __getState as getState,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ as __3 } from "@wordpress/i18n";
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  actions: {
-    get: () => selectOrderedGlobalClasses(getState()),
-    getById: (id) => selectClass(getState(), id),
-    create: async (style) => {
-      const res = await apiClient.post(style);
-      const { data, meta } = res.data;
-      dispatch(
-        slice.actions.add({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    update: async (payload) => {
-      const style = selectClass(getState(), payload.id);
-      const mergedData = { ...style, ...payload };
-      const res = await apiClient.put(payload.id, mergedData);
-      const { data, meta } = res.data;
-      dispatch(
-        slice.actions.update({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    updateProps: (args) => {
-      dispatch(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
+// src/sync-with-document-save.ts
+import { __privateRunCommandSync as runCommandSync, registerDataHook } from "@elementor/editor-v1-adapters";
+import { __dispatch, __getState as getState2, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
+function syncWithDocumentSave() {
+  const unsubscribe = syncDirtyState();
+  bindSaveAction();
+  return unsubscribe;
+}
+function syncDirtyState() {
+  return subscribeWithSelector2(selectIsDirty, () => {
+    if (!isDirty()) {
+      return;
     }
-  },
-  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
-  labels: {
-    singular: __3("Global CSS Class", "elementor"),
-    plural: __3("Global CSS Classes", "elementor")
-  }
-};
+    runCommandSync("document/save/set-is-modified", { status: true }, { internal: true });
+  });
+}
+function bindSaveAction() {
+  registerDataHook("after", "document/save/save", async () => {
+    if (!isDirty()) {
+      return;
+    }
+    const state = getState2().globalClasses;
+    await apiClient.update({
+      items: state.items,
+      order: state.order
+    });
+    __dispatch(slice.actions.setPristine());
+  });
+}
+function isDirty() {
+  return selectIsDirty(getState2());
+}
 
 // src/init.ts
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository.register(globalClassesStylesProvider);
+  stylesRepository2.register(globalClassesStylesProvider);
   injectIntoLogic({
-    id: "global-classes-hooks",
-    component: LogicHooks
+    id: "global-classes-populate-store",
+    component: PopulateStore
   });
   injectIntoClassSelectorActions({
-    id: "global-classes",
+    id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  listenTo(v1ReadyEvent(), () => {
+    syncWithDocumentSave();
+  });
 }
 
 // src/index.ts