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

package/dist/index.mjs

@@ -2146,10 +2146,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 } = useDialog();
   const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
@@ -2276,7 +2291,7 @@ function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
       },
       __14("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,
@@ -2495,8 +2510,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);
   dispatch5(slice.actions.mergeExistingClasses({ preview: previewItems, frontend: frontendItems }));
@@ -2652,12 +2669,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
 import * as React20 from "react";
-import {
-  __useActiveDocument as useActiveDocument2,
-  __useActiveDocumentActions as useActiveDocumentActions
-} from "@elementor/editor-documents";
 import { useUserStylesCapability } from "@elementor/editor-styles-repository";
-import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
 import { IconButton as IconButton4, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 
@@ -2678,62 +2690,27 @@ 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 = useActiveDocument2();
-  const { save: saveDocument } = useActiveDocumentActions();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog2();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = 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(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton4, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Title, null, __16("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __16(
-    "To open the Class Manager, save your page first. You can't continue without saving.",
-    "elementor"
-  ))), /* @__PURE__ */ React20.createElement(
-    SaveChangesDialog2.Actions,
-    {
-      actions: {
-        cancel: {
-          label: __16("Stay here", "elementor"),
-          action: closeSaveChangesDialog
-        },
-        confirm: {
-          label: __16("Save & Continue", "elementor"),
-          action: async () => {
-            await saveDocument();
-            closeSaveChangesDialog();
-            toggleClassesManagerPanel();
-            trackGlobalClassesButton();
-            prefetchClassesUsage();
-          }
-        }
-      }
-    }
-  )));
+  return /* @__PURE__ */ React20.createElement(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton4, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" })));
 };
 
 // src/components/convert-local-class-to-global-class.tsx
@@ -2996,7 +2973,7 @@ function initMcpApplyGetGlobalClassUsages(reg) {
 }
 
 // src/mcp-integration/mcp-manage-global-classes.ts
-import { BREAKPOINTS_SCHEMA_URI, STYLE_SCHEMA_URI } from "@elementor/editor-canvas";
+import { BREAKPOINTS_SCHEMA_FULL_URI, STYLE_SCHEMA_FULL_URI } from "@elementor/editor-canvas";
 import { Schema } from "@elementor/editor-props";
 import { getStylesSchema } from "@elementor/editor-styles";
 import { z as z3 } from "@elementor/schema";
@@ -3005,12 +2982,30 @@ var schema = {
   classId: z3.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),
   globalClassName: z3.string().optional().describe("Global class name (required for create)"),
   props: z3.object({
-    default: z3.record(z3.any()).describe(
-      'key-value of style-schema PropValues. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
+    default: z3.record(
+      z3.string().describe("The style property name"),
+      z3.any().describe(`The style PropValue, refer to [${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: z3.record(z3.any()).describe("key-value of style-schema PropValues, for :hover css state. optional").optional(),
-    focus: z3.record(z3.any()).describe("key-value of style-schema PropValues, for :focus css state. optional").optional(),
-    active: z3.record(z3.any()).describe("key-value of style-schema PropValues, for :active css state. optional").optional()
+    hover: z3.record(
+      z3.string().describe("The style property name"),
+      z3.any().describe(`The style PropValue, refer to [${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: z3.record(
+      z3.string().describe("The style property name"),
+      z3.any().describe(`The style PropValue, refer to [${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: z3.record(
+      z3.string().describe("The style property name"),
+      z3.any().describe(`The style PropValue, refer to [${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: z3.nullable(z3.string().describe("Responsive breakpoint name for styles. Defaults to desktop (null).")).default(null).describe("Responsive breakpoint name for styles. Defaults to desktop (null).")
 };
@@ -3066,16 +3061,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" } }
+
+${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) => {
@@ -3092,6 +3103,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) {
@@ -3106,14 +3127,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({
@@ -3123,20 +3143,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}`);
@@ -3156,10 +3167,21 @@ var initManageGlobalClasses = (reg) => {
     name: "manage-global-classes",
     requiredResources: [
       { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: STYLE_SCHEMA_URI, description: "Style schema resources" },
-      { uri: BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
+      { uri: STYLE_SCHEMA_FULL_URI, description: "Style schema resources" },
+      { uri: 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 ${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
@@ -3189,7 +3211,7 @@ async function attemptCreate(opts) {
     return newClassId;
   } catch {
     deleteClass2(newClassId);
-    return null;
+    throw new Error("error creating class");
   }
 }
 async function attemptUpdate(opts) {
@@ -3201,6 +3223,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({
@@ -3208,7 +3231,7 @@ async function attemptUpdate(opts) {
       props,
       meta: {
         breakpoint,
-        state
+        state: state === "default" ? null : state
       }
     });
     await saveGlobalClasses2({ context: "frontend" });
@@ -3221,7 +3244,7 @@ async function attemptUpdate(opts) {
       });
     });
     await saveGlobalClasses2({ context: "frontend" });
-    return false;
+    throw new Error("error updating class");
   }
 }
 async function attemptDelete(opts) {
@@ -3238,13 +3261,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