@elementor/editor-global-classes 4.2.0-888 → 4.2.0-895

package/dist/index.d.mts

@@ -4,8 +4,9 @@ import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
     onExposeCloseAttempt?: (attemptClose: (() => void) | null) => void;
+    isActive?: boolean;
 };
-declare function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt }: ClassManagerPanelEmbeddedProps): React.JSX.Element;
+declare function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt, isActive, }: ClassManagerPanelEmbeddedProps): React.JSX.Element;
 
 declare const GLOBAL_CLASSES_URI = "elementor://global-classes";
 

package/dist/index.d.ts

@@ -4,8 +4,9 @@ import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
     onExposeCloseAttempt?: (attemptClose: (() => void) | null) => void;
+    isActive?: boolean;
 };
-declare function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt }: ClassManagerPanelEmbeddedProps): React.JSX.Element;
+declare function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt, isActive, }: ClassManagerPanelEmbeddedProps): React.JSX.Element;
 
 declare const GLOBAL_CLASSES_URI = "elementor://global-classes";
 

package/dist/index.js

@@ -2122,10 +2122,25 @@ var StartSyncToV3Modal = ({
 
 // src/components/class-manager/class-manager-panel.tsx
 var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
-function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt }) {
-  return /* @__PURE__ */ React19.createElement(ClassManagerPanelContent, { onRequestClose, onExposeCloseAttempt });
+function ClassManagerPanelEmbedded({
+  onRequestClose,
+  onExposeCloseAttempt,
+  isActive
+}) {
+  return /* @__PURE__ */ React19.createElement(
+    ClassManagerPanelContent,
+    {
+      onRequestClose,
+      onExposeCloseAttempt,
+      isActive
+    }
+  );
 }
-function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
+function ClassManagerPanelContent({
+  onRequestClose,
+  onExposeCloseAttempt,
+  isActive = true
+}) {
   const isDirty2 = useDirtyState();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react10.useState)(null);
@@ -2252,7 +2267,7 @@ function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
       },
       (0, import_i18n14.__)("Save changes", "elementor")
     ))
-  ))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+  ))), isActive && /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2465,8 +2480,10 @@ async function fetchAndMergeClasses() {
   if (idsToFetch.length === 0) {
     return;
   }
-  const previewResponse = await apiClient.getStylesByIds(idsToFetch, "preview");
-  const frontendResponse = await apiClient.getStylesByIds(idsToFetch, "frontend");
+  const [previewResponse, frontendResponse] = await Promise.all([
+    apiClient.getStylesByIds(idsToFetch, "preview"),
+    apiClient.getStylesByIds(idsToFetch, "frontend")
+  ]);
   const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
   const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
   (0, import_store22.__dispatch)(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
@@ -2618,9 +2635,7 @@ var import_store32 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React20 = __toESM(require("react"));
-var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui17 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 
@@ -2641,68 +2656,33 @@ var PrefetchCssClassUsage = () => {
 };
 
 // src/components/class-manager/class-manager-button.tsx
-var trackGlobalClassesButton = () => {
-  trackGlobalClasses({
-    event: "classManagerOpened",
-    source: "style-panel"
-  });
-};
+var EVENT_TOGGLE_DESIGN_SYSTEM = "elementor/toggle-design-system";
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents5.__useActiveDocument)();
-  const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui10.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
   if (!isUserAllowedToUpdateClass) {
     return null;
   }
-  const toggleClassesManagerPanel = () => {
+  const handleOpenPanel = () => {
     window.dispatchEvent(
-      new CustomEvent("elementor/toggle-design-system", {
+      new CustomEvent(EVENT_TOGGLE_DESIGN_SYSTEM, {
         detail: { tab: "classes" }
       })
     );
-  };
-  const handleOpenPanel = () => {
-    if (document?.isDirty) {
-      openSaveChangesDialog();
-      return;
-    }
-    toggleClassesManagerPanel();
-    trackGlobalClassesButton();
+    trackGlobalClasses({
+      event: "classManagerOpened",
+      source: "style-panel"
+    });
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui17.Tooltip, { title: (0, import_i18n16.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n16.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n16.__)(
-    "To open the Class Manager, save your page first. You can't continue without saving.",
-    "elementor"
-  ))), /* @__PURE__ */ React20.createElement(
-    import_editor_ui10.SaveChangesDialog.Actions,
-    {
-      actions: {
-        cancel: {
-          label: (0, import_i18n16.__)("Stay here", "elementor"),
-          action: closeSaveChangesDialog
-        },
-        confirm: {
-          label: (0, import_i18n16.__)("Save & Continue", "elementor"),
-          action: async () => {
-            await saveDocument();
-            closeSaveChangesDialog();
-            toggleClassesManagerPanel();
-            trackGlobalClassesButton();
-            prefetchClassesUsage();
-          }
-        }
-      }
-    }
-  )));
+  return /* @__PURE__ */ React20.createElement(import_ui17.Tooltip, { title: (0, import_i18n16.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" })));
 };
 
 // src/components/convert-local-class-to-global-class.tsx
 var React21 = __toESM(require("react"));
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_ui11 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 var import_ui18 = require("@elementor/ui");
 var import_i18n17 = require("@wordpress/i18n");
 var ConvertLocalClassToGlobalClass = (props) => {
@@ -2724,7 +2704,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
     }
   };
   return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
-    import_editor_ui11.MenuListItem,
+    import_editor_ui10.MenuListItem,
     {
       disabled: !props.canConvert,
       onClick: handleConversion,
@@ -2968,12 +2948,30 @@ var schema = {
   classId: import_schema3.z.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),
   globalClassName: import_schema3.z.string().optional().describe("Global class name (required for create)"),
   props: import_schema3.z.object({
-    default: import_schema3.z.record(import_schema3.z.any()).describe(
-      'key-value of style-schema PropValues. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
+    default: import_schema3.z.record(
+      import_schema3.z.string().describe("The style property name"),
+      import_schema3.z.any().describe(`The style PropValue, refer to [${import_editor_canvas2.STYLE_SCHEMA_FULL_URI}] how to generate values`)
+    ).describe(
+      "An object record containing style property names and their new values. MUST contain at least one property \u2014 empty objects are rejected."
     ),
-    hover: import_schema3.z.record(import_schema3.z.any()).describe("key-value of style-schema PropValues, for :hover css state. optional").optional(),
-    focus: import_schema3.z.record(import_schema3.z.any()).describe("key-value of style-schema PropValues, for :focus css state. optional").optional(),
-    active: import_schema3.z.record(import_schema3.z.any()).describe("key-value of style-schema PropValues, for :active css state. optional").optional()
+    hover: import_schema3.z.record(
+      import_schema3.z.string().describe("The style property name"),
+      import_schema3.z.any().describe(`The style PropValue, refer to [${import_editor_canvas2.STYLE_SCHEMA_FULL_URI}] how to generate values`)
+    ).describe(
+      "An object record containing style property names and their new values to be set on the element. for :hover css state. optional"
+    ).optional(),
+    focus: import_schema3.z.record(
+      import_schema3.z.string().describe("The style property name"),
+      import_schema3.z.any().describe(`The style PropValue, refer to [${import_editor_canvas2.STYLE_SCHEMA_FULL_URI}] how to generate values`)
+    ).describe(
+      "An object record containing style property names and their new values to be set on the element. for :focus css state. optional"
+    ).optional(),
+    active: import_schema3.z.record(
+      import_schema3.z.string().describe("The style property name"),
+      import_schema3.z.any().describe(`The style PropValue, refer to [${import_editor_canvas2.STYLE_SCHEMA_FULL_URI}] how to generate values`)
+    ).describe(
+      "An object record containing style property names and their new values to be set on the element. for :active css state. optional"
+    ).optional()
   }),
   breakpoint: import_schema3.z.nullable(import_schema3.z.string().describe("Responsive breakpoint name for styles. Defaults to desktop (null).")).default(null).describe("Responsive breakpoint name for styles. Defaults to desktop (null).")
 };
@@ -3029,16 +3027,32 @@ var handler = async (input) => {
       }
     });
   });
+  if (action !== "delete") {
+    const hasAnyProps = Object.values(propsWithStates).some(
+      (stateProps) => Object.keys(stateProps).length > 0
+    );
+    if (!hasAnyProps) {
+      throw new Error(
+        `Props must not be empty. Each prop must be a PropValue object from the style schema.
+
+Example: { "display": { "$$type": "string", "value": "flex" }, "flex-direction": { "$$type": "string", "value": "column" } }
+
+${import_editor_canvas2.STYLE_SCHEMA_FULL_URI} to get the allowed values (look at the "value" enum in the schema response), then construct { "$$type": "string", "value": "<chosen value>" } for each property.
+Available Properties: ${validProps.join(
+          ", "
+        )}`
+      );
+    }
+  }
   if (errors.length > 0) {
-    return {
-      status: "error",
-      message: `Validation errors:
+    throw new Error(
+      `Validation errors:
 ${errors.join("\n")}
 Available Properties: ${validProps.join(
         ", "
       )}
 Update your input and try again.`
-    };
+    );
   }
   const Utils = window.elementorV2.editorVariables.Utils;
   Object.values(propsWithStates).forEach((props) => {
@@ -3055,6 +3069,16 @@ Update your input and try again.`
     message: "unknown error"
   };
   try {
+    if (action === "delete") {
+      const deleted = await attemptDelete({
+        classId,
+        stylesProvider: globalClassesStylesProvider
+      });
+      if (deleted) {
+        return { status: "ok", message: `deleted global class with ID ${classId}` };
+      }
+      throw new Error("error deleting class");
+    }
     let currentAction = action;
     for await (const [state, props] of Object.entries(propsWithStates)) {
       switch (currentAction) {
@@ -3069,14 +3093,13 @@ Update your input and try again.`
           if (newClassId && currentAction === "create") {
             currentAction = "modify";
             classId = newClassId;
+            result = {
+              status: "ok",
+              message: `created global class with ID ${newClassId}`
+            };
+          } else {
+            throw new Error("error creating class");
           }
-          result = newClassId ? {
-            status: "ok",
-            message: `created global class with ID ${newClassId}`
-          } : {
-            status: "error",
-            message: "error creating class"
-          };
           break;
         case "modify":
           const updated = await attemptUpdate({
@@ -3086,20 +3109,11 @@ Update your input and try again.`
             breakpoint: breakpointValue,
             state
           });
-          result = updated ? { status: "ok", classId } : {
-            status: "error",
-            message: "error modifying class"
-          };
-          break;
-        case "delete":
-          const deleted = await attemptDelete({
-            classId,
-            stylesProvider: globalClassesStylesProvider
-          });
-          result = deleted ? { status: "ok", message: `deleted global class with ID ${classId}` } : {
-            status: "error",
-            message: "error deleting class"
-          };
+          if (updated) {
+            result = { status: "ok", classId };
+          } else {
+            throw new Error("error modifying class");
+          }
           break;
         default:
           throw new Error(`Unsupported action ${action}`);
@@ -3119,10 +3133,21 @@ var initManageGlobalClasses = (reg) => {
     name: "manage-global-classes",
     requiredResources: [
       { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: import_editor_canvas2.STYLE_SCHEMA_URI, description: "Style schema resources" },
-      { uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
+      { uri: import_editor_canvas2.STYLE_SCHEMA_FULL_URI, description: "Style schema resources" },
+      { uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_FULL_URI, description: "Breakpoints list" }
     ],
-    description: `Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE compositions. Do NOT create classes for one-off styles or layout-specific properties.`,
+    description: `Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE applying them. Do NOT create classes for one-off styles.
+
+IMPORTANT: props must contain actual CSS property values \u2014 never pass empty objects.
+Fetch ${import_editor_canvas2.STYLE_SCHEMA_FULL_URI} to get the allowed values for each property, then use them to build the props object.
+
+Example \u2014 creating a flex column class:
+props.default = {
+  "display": { "$$type": "string", "value": "flex" },
+  "flex-direction": { "$$type": "string", "value": "column" }
+}
+
+The style schema returns a JSON Schema. Extract the "value" enum to pick the right value, then construct { "$$type": "string", "value": "<picked value>" }.`,
     schema,
     outputSchema,
     handler
@@ -3152,7 +3177,7 @@ async function attemptCreate(opts) {
     return newClassId;
   } catch {
     deleteClass2(newClassId);
-    return null;
+    throw new Error("error creating class");
   }
 }
 async function attemptUpdate(opts) {
@@ -3164,6 +3189,7 @@ async function attemptUpdate(opts) {
   if (!updateProps || !update) {
     throw new Error("User is unable to update global classes");
   }
+  await loadExistingClasses([classId]);
   const snapshot = structuredClone(stylesProvider.actions.all());
   try {
     updateProps({
@@ -3171,7 +3197,7 @@ async function attemptUpdate(opts) {
       props,
       meta: {
         breakpoint,
-        state
+        state: state === "default" ? null : state
       }
     });
     await saveGlobalClasses2({ context: "frontend" });
@@ -3184,7 +3210,7 @@ async function attemptUpdate(opts) {
       });
     });
     await saveGlobalClasses2({ context: "frontend" });
-    return false;
+    throw new Error("error updating class");
   }
 }
 async function attemptDelete(opts) {
@@ -3201,13 +3227,9 @@ async function attemptDelete(opts) {
   if (!targetClass) {
     throw new Error(`Class with ID "${classId}" not found`);
   }
-  try {
-    deleteClass2(classId);
-    await saveGlobalClasses2({ context: "frontend" });
-    return true;
-  } catch {
-    return false;
-  }
+  deleteClass2(classId);
+  await saveGlobalClasses2({ context: "frontend" });
+  return true;
 }
 
 // src/mcp-integration/index.ts
@@ -3224,7 +3246,7 @@ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
-var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store30 = require("@elementor/store");
 var pendingSave = null;
@@ -3239,7 +3261,7 @@ function syncDirtyState() {
     if (!isDirty()) {
       return;
     }
-    (0, import_editor_documents6.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents5.setDocumentModifiedStatus)(true);
   });
 }
 function triggerSave(panelActions, context2 = "preview") {