@elementor/editor-global-classes 0.4.0 → 0.6.0

package/dist/index.js

@@ -26,31 +26,71 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 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_repository = require("@elementor/editor-styles-repository");
-var import_store7 = require("@elementor/store");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store9 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React3 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var React6 = __toESM(require("react"));
+var import_icons5 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 
 // src/components/class-manager/class-manager-panel.tsx
-var React2 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_editor_panels = require("@elementor/editor-panels");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
+var import_icons4 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 
-// src/components/class-manager/global-classes-list.tsx
+// src/components/class-manager/class-manager-introduction.tsx
 var React = __toESM(require("react"));
+var import_react = require("react");
+var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var MESSAGE_KEY = "global-class-manager-4";
+var ClassManagerIntroduction = () => {
+  const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
+  const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
+  return /* @__PURE__ */ React.createElement(
+    import_editor_ui.IntroductionModal,
+    {
+      open: shouldShowIntroduction,
+      title: (0, import_i18n.__)("CSS Class manager"),
+      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      handleClose: (shouldShowAgain) => {
+        if (!shouldShowAgain) {
+          suppressMessage();
+        }
+        setShouldShowIntroduction(false);
+      }
+    }
+  );
+};
+var IntroductionContent = () => {
+  return /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(import_ui.Image, { sx: { width: "100%", height: "312px" }, src: "", alt: "Introduction" }), /* @__PURE__ */ React.createElement(import_ui.Box, null, /* @__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.",
+    "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.",
+    "elementor"
+  ))));
+};
 
-// src/store.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_editor_styles = require("@elementor/editor-styles");
-var import_store = require("@elementor/store");
+// src/components/class-manager/global-classes-list.tsx
+var React4 = __toESM(require("react"));
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_icons3 = require("@elementor/icons");
+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_store2 = require("@elementor/store");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -58,11 +98,19 @@ var GlobalClassNotFoundError = (0, import_utils.createError)({
   code: "global_class_not_found",
   message: "Global class not found."
 });
+var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
+  code: "global_class_label_already_exists",
+  message: "Class with this name already exists."
+});
 
 // src/store.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
 var initialState = {
   items: {},
-  order: []
+  order: [],
+  isDirty: false
 };
 var SLICE_NAME = "globalClasses";
 var slice = (0, import_store.__createSlice)({
@@ -72,14 +120,29 @@ var slice = (0, import_store.__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
@@ -94,73 +157,396 @@ var slice = (0, import_store.__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 = (0, import_store.__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 = (0, import_store.__useSelector)(selectOrderedGlobalClasses);
   return items;
 };
+var useGlobalClassesOrder = () => (0, import_store.__useSelector)(selectOrder);
+
+// src/global-classes-styles-provider.ts
+var globalClassesStylesProvider = {
+  key: "global-classes",
+  priority: 30,
+  actions: {
+    get: () => selectOrderedGlobalClasses((0, import_store2.__getState)()),
+    getById: (id) => selectClass((0, import_store2.__getState)(), id),
+    create: (label) => {
+      const classes = selectGlobalClasses((0, import_store2.__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 = (0, import_editor_styles2.generateId)("g-", existingIds);
+      (0, import_store2.__dispatch)(
+        slice.actions.add({
+          id,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id;
+    },
+    update: (payload) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      (0, import_store2.__dispatch)(slice.actions.delete(id));
+    },
+    setOrder: (order) => {
+      (0, import_store2.__dispatch)(slice.actions.setOrder(order));
+    },
+    updateProps: (args) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  },
+  subscribe: (cb) => (0, import_store2.__subscribeWithSelector)((state) => state.globalClasses, cb),
+  labels: {
+    singular: (0, import_i18n2.__)("Global class", "elementor"),
+    plural: (0, import_i18n2.__)("Global CSS Classes", "elementor")
+  }
+};
+
+// src/components/class-manager/delete-confirmation-dialog.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var context = (0, import_react2.createContext)(null);
+var DeleteConfirmationProvider = ({ children }) => {
+  const [dialogProps, setDialogProps] = (0, import_react2.useState)(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(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React2.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React2.createElement(import_icons.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete global class", "elementor")), /* @__PURE__ */ React2.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
+    "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(import_ui2.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
+};
+var useDeleteConfirmation = () => {
+  const contextValue = (0, import_react2.useContext)(context);
+  if (!contextValue) {
+    throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
+  }
+  return contextValue;
+};
+
+// src/components/class-manager/sortable.tsx
+var React3 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React3.createElement(import_ui3.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(import_icons2.GripVerticalIcon, { fontSize: "tiny" }));
+var SortableItem = ({ children, id }) => {
+  return /* @__PURE__ */ React3.createElement(
+    import_ui3.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 = (0, import_ui3.styled)(import_ui3.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 = (0, import_ui3.styled)(import_ui3.Box)`
+	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(import_ui.Stack, null, /* @__PURE__ */ React.createElement(import_ui.List, { role: "list" }, cssClasses?.map(({ id, label }) => {
-    return /* @__PURE__ */ React.createElement(import_ui.Stack, { key: id, direction: "row", alignItems: "center", gap: 1, role: "listitem" }, /* @__PURE__ */ React.createElement(import_ui.ListItemButton, { sx: { borderRadius: 1 } }, /* @__PURE__ */ React.createElement(import_editor_ui.EllipsisWithTooltip, { title: label, as: import_ui.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(import_ui4.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
+  } = (0, import_editor_ui2.useEditable)({
+    value: label,
+    onSubmit: renameClass,
+    validation: validateLabel
+  });
+  const { openDialog } = useDeleteConfirmation();
+  const popupState = (0, import_ui4.usePopupState)({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  return /* @__PURE__ */ React4.createElement(import_ui4.Stack, { direction: "row", alignItems: "center", gap: 1, flexGrow: 1, flexShrink: 0 }, /* @__PURE__ */ React4.createElement(
+    StyledListItem,
+    {
+      component: "div",
+      disablePadding: true,
+      disableGutters: true,
+      secondaryAction: /* @__PURE__ */ React4.createElement(
+        import_ui4.Tooltip,
+        {
+          placement: "top",
+          className: "class-item-more-actions",
+          title: (0, import_i18n4.__)("More actions", "elementor")
+        },
+        /* @__PURE__ */ React4.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React4.createElement(import_icons3.DotsVerticalIcon, { fontSize: "tiny" }))
+      )
+    },
+    /* @__PURE__ */ React4.createElement(
+      import_ui4.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(
+        import_editor_ui2.EditableField,
+        {
+          ref: editableRef,
+          error,
+          as: import_ui4.Typography,
+          variant: "caption",
+          ...getEditableProps()
+        }
+      ) : /* @__PURE__ */ React4.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" }))
+    ),
+    children,
+    /* @__PURE__ */ React4.createElement(
+      import_ui4.Menu,
+      {
+        ...(0, import_ui4.bindMenu)(popupState),
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        }
+      },
+      /* @__PURE__ */ React4.createElement(
+        import_ui4.MenuItem,
+        {
+          sx: { minWidth: "160px" },
+          onClick: () => {
+            popupState.close();
+            openEditMode();
+          }
+        },
+        /* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Rename", "elementor") })
+      ),
+      /* @__PURE__ */ React4.createElement(
+        import_ui4.MenuItem,
+        {
+          onClick: () => {
+            popupState.close();
+            openDialog({ id, label });
+          }
+        },
+        /* @__PURE__ */ React4.createElement(import_ui4.ListItemText, { primary: (0, import_i18n4.__)("Delete", "elementor"), sx: { color: "error.light" } })
+      )
+    )
+  ));
+};
+var StyledListItem = (0, import_ui4.styled)(import_ui4.ListItem)`
+	.class-item-more-actions {
+		visibility: hidden;
+	}
+	&:hover {
+		.class-item-more-actions {
+			visibility: visible;
+		}
+	}
+`;
+var EmptyState = () => /* @__PURE__ */ React4.createElement(import_ui4.Stack, { alignItems: "center", gap: 3, pt: 4, px: 0.5 }, /* @__PURE__ */ React4.createElement(import_icons3.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React4.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n4.__)("No CSS classes created yet", "elementor")), /* @__PURE__ */ React4.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
+  "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 = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant }) => ({
+  "&.MuiTypography-root": {
+    ...theme.typography[variant]
+  }
+}));
+var Indicator = (0, import_ui4.styled)(import_ui4.Box, {
+  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 (!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");
+  }
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels.__createPanel)({
+var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id: "class-manager-panel",
   component: ClassManagerPanel
 });
 function ClassManagerPanel() {
-  return /* @__PURE__ */ React2.createElement(import_ui2.ErrorBoundary, { fallback: /* @__PURE__ */ React2.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React2.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { p: 1, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n.__)("CSS Class manager")), /* @__PURE__ */ React2.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React2.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React2.createElement(GlobalClassesList, null))));
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui5.ErrorBoundary, { fallback: /* @__PURE__ */ React5.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_ui5.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(import_icons4.ColorSwatchIcon, { fontSize: "inherit", sx: { transform: "rotate(90deg)" } }), (0, import_i18n5.__)("CSS Class manager")), /* @__PURE__ */ React5.createElement(CloseButton, { sx: { marginLeft: "auto" } }))), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React5.createElement(GlobalClassesList, null)))), /* @__PURE__ */ React5.createElement(ClassManagerIntroduction, null));
 }
 var CloseButton = (props) => {
   const { close } = usePanelActions();
-  return /* @__PURE__ */ React2.createElement(import_ui2.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React2.createElement(import_icons.XIcon, { fontSize: "small" }));
+  return /* @__PURE__ */ React5.createElement(import_ui5.IconButton, { size: "small", color: "secondary", onClick: close, ...props }, /* @__PURE__ */ React5.createElement(import_icons4.XIcon, { fontSize: "small" }));
 };
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React2.createElement(import_ui2.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React2.createElement(import_ui2.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React5.createElement(import_ui5.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React5.createElement(import_ui5.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React5.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
   const { open } = usePanelActions();
-  return /* @__PURE__ */ React3.createElement(import_ui3.Tooltip, { title: (0, import_i18n2.__)("Class manager"), placement: "top" }, /* @__PURE__ */ React3.createElement(import_ui3.IconButton, { onClick: open }, /* @__PURE__ */ React3.createElement(import_icons2.ColorSwatchIcon, { fontSize: "tiny" })));
+  return /* @__PURE__ */ React6.createElement(import_ui6.Tooltip, { title: (0, import_i18n6.__)("Class manager"), placement: "top" }, /* @__PURE__ */ React6.createElement(import_ui6.IconButton, { onClick: open }, /* @__PURE__ */ React6.createElement(import_icons5.ColorSwatchIcon, { fontSize: "tiny" })));
 };
 
-// src/components/logic-hooks.tsx
-var import_react = require("react");
-var import_store3 = require("@elementor/store");
+// src/components/populate-store.tsx
+var import_react3 = require("react");
+var import_store5 = require("@elementor/store");
 
 // src/api.ts
 var import_http = require("@elementor/http");
 var RESOURCE_URL = "/global-classes";
 var apiClient = {
-  all: async () => {
-    return (0, import_http.httpService)().get(RESOURCE_URL);
-  },
-  post: async (data) => {
-    return (0, import_http.httpService)().post(RESOURCE_URL, data);
-  },
-  put: async (id, data) => {
-    return (0, import_http.httpService)().put(`${RESOURCE_URL}/${id}`, data);
-  }
+  all: () => (0, import_http.httpService)().get("elementor/v1" + RESOURCE_URL),
+  update: (payload) => (0, import_http.httpService)().put("elementor/v1" + RESOURCE_URL, payload)
 };
 
-// src/components/logic-hooks.tsx
-function LogicHooks() {
-  const dispatch2 = (0, import_store3.__useDispatch)();
-  (0, import_react.useEffect)(() => {
+// src/components/populate-store.tsx
+function PopulateStore() {
+  const dispatch2 = (0, import_store5.__useDispatch)();
+  (0, import_react3.useEffect)(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
       dispatch2(slice.actions.init({ items: data, order: meta.order }));
@@ -169,69 +555,55 @@ function LogicHooks() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-var import_store5 = require("@elementor/store");
-var import_i18n3 = require("@wordpress/i18n");
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  actions: {
-    get: () => selectOrderedGlobalClasses((0, import_store5.__getState)()),
-    getById: (id) => selectClass((0, import_store5.__getState)(), id),
-    create: async (style) => {
-      const res = await apiClient.post(style);
-      const { data, meta } = res.data;
-      (0, import_store5.__dispatch)(
-        slice.actions.add({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    update: async (payload) => {
-      const style = selectClass((0, import_store5.__getState)(), payload.id);
-      const mergedData = { ...style, ...payload };
-      const res = await apiClient.put(payload.id, mergedData);
-      const { data, meta } = res.data;
-      (0, import_store5.__dispatch)(
-        slice.actions.update({
-          style: data,
-          order: meta.order
-        })
-      );
-      return data;
-    },
-    updateProps: (args) => {
-      (0, import_store5.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
+// src/sync-with-document-save.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store7 = require("@elementor/store");
+function syncWithDocumentSave() {
+  const unsubscribe = syncDirtyState();
+  bindSaveAction();
+  return unsubscribe;
+}
+function syncDirtyState() {
+  return (0, import_store7.__subscribeWithSelector)(selectIsDirty, () => {
+    if (!isDirty()) {
+      return;
     }
-  },
-  subscribe: (cb) => (0, import_store5.__subscribeWithSelector)((state) => state.globalClasses, cb),
-  labels: {
-    singular: (0, import_i18n3.__)("Global CSS Class", "elementor"),
-    plural: (0, import_i18n3.__)("Global CSS Classes", "elementor")
-  }
-};
+    (0, import_editor_v1_adapters.__privateRunCommandSync)("document/save/set-is-modified", { status: true }, { internal: true });
+  });
+}
+function bindSaveAction() {
+  (0, import_editor_v1_adapters.registerDataHook)("after", "document/save/save", async () => {
+    if (!isDirty()) {
+      return;
+    }
+    const state = (0, import_store7.__getState)().globalClasses;
+    await apiClient.update({
+      items: state.items,
+      order: state.order
+    });
+    (0, import_store7.__dispatch)(slice.actions.setPristine());
+  });
+}
+function isDirty() {
+  return selectIsDirty((0, import_store7.__getState)());
+}
 
 // src/init.ts
 function init() {
-  (0, import_store7.__registerSlice)(slice);
+  (0, import_store9.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository2.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
-    id: "global-classes-hooks",
-    component: LogicHooks
+    id: "global-classes-populate-store",
+    component: PopulateStore
   });
   (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
-    id: "global-classes",
+    id: "global-classes-manager-button",
     component: ClassManagerButton
   });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+    syncWithDocumentSave();
+  });
 }
 
 // src/index.ts