@elementor/editor-global-classes 4.3.0-1001 → 4.3.0-1002

package/dist/index.js

@@ -1974,7 +1974,7 @@ var GlobalClassesList = ({
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch7 = (0, import_store20.__useDispatch)();
+  const dispatch8 = (0, import_store20.__useDispatch)();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = (0, import_react8.useState)(null);
   const [loading, setLoading] = (0, import_react8.useState)({});
@@ -2007,22 +2007,22 @@ var GlobalClassesList = ({
     }
   });
   (0, import_react8.useEffect)(() => {
-    const handler2 = (event) => {
+    const handler = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
         event.preventDefault();
         if (event.shiftKey) {
-          dispatch7(slice.actions.redo());
+          dispatch8(slice.actions.redo());
           return;
         }
-        dispatch7(slice.actions.undo());
+        dispatch8(slice.actions.undo());
       }
     };
-    window.addEventListener("keydown", handler2, {
+    window.addEventListener("keydown", handler, {
       capture: true
     });
-    return () => window.removeEventListener("keydown", handler2);
-  }, [dispatch7]);
+    return () => window.removeEventListener("keydown", handler);
+  }, [dispatch8]);
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React17.createElement(EmptyState, null);
   }
@@ -2082,7 +2082,7 @@ var GlobalClassesList = ({
                     source: "class-manager"
                   });
                   void await loadExistingClasses([cssClass.id]);
-                  dispatch7(
+                  dispatch8(
                     slice.actions.update({
                       style: {
                         id: cssClass.id,
@@ -2108,7 +2108,7 @@ var GlobalClassesList = ({
                 } else if (newValue && onStartSyncRequest) {
                   onStartSyncRequest(id);
                 } else {
-                  dispatch7(
+                  dispatch8(
                     slice.actions.update({
                       style: {
                         id,
@@ -2135,10 +2135,10 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch7 = (0, import_store20.__useDispatch)();
+  const dispatch8 = (0, import_store20.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch7(slice.actions.setOrder(newIds));
+    dispatch8(slice.actions.setOrder(newIds));
     if (draggedItemId) {
       trackGlobalClasses({
         event: "classManagerReorder",
@@ -2650,9 +2650,9 @@ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_embedded_documents_manager = require("@elementor/editor-embedded-documents-manager");
-var import_editor_mcp3 = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_store32 = require("@elementor/store");
+var import_store34 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React20 = __toESM(require("react"));
@@ -2755,7 +2755,7 @@ var import_react11 = require("react");
 var import_editor_canvas = require("@elementor/editor-canvas");
 var import_store28 = require("@elementor/store");
 function GlobalStylesImportListener() {
-  const dispatch7 = (0, import_store28.__useDispatch)();
+  const dispatch8 = (0, import_store28.__useDispatch)();
   (0, import_react11.useEffect)(() => {
     const handleGlobalStylesImported = async (event) => {
       const customEvent = event;
@@ -2764,7 +2764,7 @@ function GlobalStylesImportListener() {
         loadCurrentDocumentClasses();
         return;
       }
-      dispatch7(
+      dispatch8(
         slice.actions.updateAfterTemplateImport({
           addedItems: globalClasses.added_items,
           addedIdsOrder: globalClasses.added_items_order,
@@ -2776,7 +2776,7 @@ function GlobalStylesImportListener() {
     return () => {
       window.removeEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
-  }, [dispatch7]);
+  }, [dispatch8]);
   return null;
 }
 
@@ -2793,9 +2793,67 @@ function PopulateStore() {
   return null;
 }
 
+// src/mcp-integration/manage-classes-tool.ts
+var import_http_client2 = require("@elementor/http-client");
+var import_schema = require("@elementor/schema");
+var import_store30 = require("@elementor/store");
+var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
+var TOOL_NAME = "manage-classes";
+var initManageClassesTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: TOOL_NAME,
+    description: "Manage V4 global CSS classes on the active kit. Create, update, or delete a single class using raw CSS declarations.",
+    schema: {
+      action: import_schema.z.enum(["create", "update", "delete"]),
+      id: import_schema.z.string().optional().describe("Class id \u2014 required for update/delete. Get from the global-classes resource."),
+      label: import_schema.z.string().optional().describe("Class label (lowercase, dash-separated) \u2014 required for create/update."),
+      css: import_schema.z.record(import_schema.z.string()).optional().describe("Raw CSS declarations (property \u2192 value) \u2014 required for create/update.")
+    },
+    outputSchema: {
+      status: import_schema.z.enum(["ok"]).describe("Operation status")
+    },
+    requiredResources: [
+      {
+        uri: GLOBAL_CLASSES_URI,
+        description: "Current global classes \u2014 check before creating to avoid duplicates"
+      }
+    ],
+    isDestructive: true,
+    handler: async (params) => {
+      const { data } = await (0, import_http_client2.httpService)().post(MCP_PROXY_URL, {
+        tool: TOOL_NAME,
+        input: params
+      });
+      const payload = data.data;
+      const { create, update, delete: del } = globalClassesStylesProvider.actions;
+      switch (params.action) {
+        case "create":
+          if (payload.class && create) {
+            create(payload.class.label, payload.class.variants, payload.class.id);
+          }
+          break;
+        case "update":
+          if (payload.class && update) {
+            update(payload.class);
+          }
+          break;
+        case "delete":
+          if (params.id && del) {
+            del(params.id);
+          }
+          break;
+      }
+      (0, import_store30.__dispatch)(slice.actions.reset({ context: "frontend" }));
+      window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: "frontend" } }));
+      return { status: "ok" };
+    }
+  });
+};
+
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
-var import_schema = require("@elementor/schema");
+var import_schema2 = require("@elementor/schema");
 
 // src/mcp-integration/apply-global-class-guide-prompt.ts
 var import_editor_mcp = require("@elementor/editor-mcp");
@@ -2849,12 +2907,12 @@ function initMcpApplyUnapplyGlobalClasses(server) {
   );
   addTool({
     schema: {
-      classId: import_schema.z.string().describe("The ID of the class to apply"),
-      elementId: import_schema.z.string().describe("The ID of the element to which the class will be applied")
+      classId: import_schema2.z.string().describe("The ID of the class to apply"),
+      elementId: import_schema2.z.string().describe("The ID of the element to which the class will be applied")
     },
     outputSchema: {
-      result: import_schema.z.string().describe("Result message indicating the success of the apply operation"),
-      llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!")
+      result: import_schema2.z.string().describe("Result message indicating the success of the apply operation"),
+      llm_instructions: import_schema2.z.string().describe("Instructions what to do next, Important to follow these instructions!")
     },
     name: "apply-global-class",
     description: `Apply a global class to an element for shared design-system styling. Read the full guide at [${APPLY_GLOBAL_CLASS_GUIDE_URI}].`,
@@ -2880,11 +2938,11 @@ function initMcpApplyUnapplyGlobalClasses(server) {
   addTool({
     name: "unapply-global-class",
     schema: {
-      classId: import_schema.z.string().describe("The ID of the class to unapply"),
-      elementId: import_schema.z.string().describe("The ID of the element from which the class will be unapplied")
+      classId: import_schema2.z.string().describe("The ID of the class to unapply"),
+      elementId: import_schema2.z.string().describe("The ID of the element from which the class will be unapplied")
     },
     outputSchema: {
-      result: import_schema.z.string().describe("Result message indicating the success of the unapply operation")
+      result: import_schema2.z.string().describe("Result message indicating the success of the unapply operation")
     },
     description: `Unapply a global class from an element by class ID. Resolve class names to IDs via [${GLOBAL_CLASSES_URI}].`,
     requiredResources: [{ description: "Global classes list", uri: GLOBAL_CLASSES_URI }],
@@ -2902,21 +2960,21 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 }
 
 // src/mcp-integration/mcp-get-global-class-usages.ts
-var import_schema2 = require("@elementor/schema");
+var import_schema3 = require("@elementor/schema");
 function initMcpApplyGetGlobalClassUsages(reg) {
   const { addTool } = reg;
   const globalClassesUsageSchema = {
-    usages: import_schema2.z.array(
-      import_schema2.z.object({
-        classId: import_schema2.z.string().describe(
+    usages: import_schema3.z.array(
+      import_schema3.z.object({
+        classId: import_schema3.z.string().describe(
           'The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'
         ),
-        usages: import_schema2.z.array(
-          import_schema2.z.object({
-            pageId: import_schema2.z.string().describe("The ID of the page where the class is used"),
-            title: import_schema2.z.string().describe("The title of the page where the class is used"),
-            total: import_schema2.z.number().describe("The number of times the class is used on this page"),
-            elements: import_schema2.z.array(import_schema2.z.string()).describe("List of element IDs using this class on the page")
+        usages: import_schema3.z.array(
+          import_schema3.z.object({
+            pageId: import_schema3.z.string().describe("The ID of the page where the class is used"),
+            title: import_schema3.z.string().describe("The title of the page where the class is used"),
+            total: import_schema3.z.number().describe("The number of times the class is used on this page"),
+            elements: import_schema3.z.array(import_schema3.z.string()).describe("List of element IDs using this class on the page")
           })
         )
       })
@@ -2964,270 +3022,11 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   });
 }
 
-// src/mcp-integration/mcp-manage-global-classes.ts
-var import_editor_canvas2 = require("@elementor/editor-canvas");
-var import_editor_mcp2 = require("@elementor/editor-mcp");
-var import_schema3 = require("@elementor/schema");
-var schema = {
-  action: import_schema3.z.enum(["create", "modify", "delete"]).describe("Operation to perform"),
-  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)"),
-  style: import_schema3.z.object({
-    default: import_schema3.z.string().describe("Plaintext CSS for the default state. MUST be non-empty \u2014 blank strings are rejected."),
-    hover: import_schema3.z.string().describe("Plaintext CSS for the :hover state. optional").optional(),
-    focus: import_schema3.z.string().describe("Plaintext CSS for the :focus state. optional").optional(),
-    active: import_schema3.z.string().describe("Plaintext CSS for the :active state. optional").optional()
-  }).describe(
-    "Plaintext CSS per pseudo-state. All states are converted in one bulk request; unconvertible declarations are stored as custom CSS."
-  ),
-  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).")
-};
-var outputSchema = {
-  status: import_schema3.z.enum(["ok", "error"]).describe("Operation status"),
-  classId: import_schema3.z.string().optional().describe("Class ID (returned on create success)"),
-  message: import_schema3.z.string().optional().describe("Error details if status is error")
-};
-var handler = async (input) => {
-  const { action, classId: rawClassId, globalClassName, style: rawStyle, breakpoint } = input;
-  let classId = rawClassId;
-  if (action === "create" && !globalClassName) {
-    return {
-      status: "error",
-      message: "Create requires globalClassName"
-    };
-  }
-  if (action === "modify" && !classId) {
-    return {
-      status: "error",
-      message: "Modify requires classId"
-    };
-  }
-  if (action === "delete" && !classId) {
-    return {
-      status: "error",
-      message: "Delete requires classId"
-    };
-  }
-  const { create, update, delete: deleteClass2 } = globalClassesStylesProvider.actions;
-  if (!create || !update || !deleteClass2) {
-    return {
-      status: "error",
-      message: "Required actions not available"
-    };
-  }
-  const styleBlocks = collectNonEmptyStyleBlocks(rawStyle);
-  if (action !== "delete" && Object.keys(styleBlocks).length === 0) {
-    throw new Error(
-      'Style must not be empty. Provide plaintext CSS per state.\n\nExample: style.default = "display: flex; flex-direction: column; gap: 1rem;"'
-    );
-  }
-  let convertedByState = {};
-  if (action !== "delete") {
-    const conversionResults = await (0, import_editor_canvas2.convertStyleBlocksToAtomic)(styleBlocks);
-    convertedByState = Object.fromEntries(
-      Object.entries(conversionResults).map(([state, { props, customCss }]) => [
-        state,
-        { props, customCss: toStoredCustomCss(customCss) }
-      ])
-    );
-  }
-  const breakpointValue = breakpoint ?? "desktop";
-  let result = {
-    status: "error",
-    classId: "",
-    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, customCss }] of Object.entries(convertedByState)) {
-      switch (currentAction) {
-        case "create":
-          const newClassId = await attemptCreate({
-            props,
-            customCss,
-            className: globalClassName,
-            stylesProvider: globalClassesStylesProvider,
-            breakpoint: breakpointValue,
-            state
-          });
-          if (newClassId && currentAction === "create") {
-            currentAction = "modify";
-            classId = newClassId;
-            result = {
-              status: "ok",
-              message: `created global class with ID ${newClassId}`
-            };
-            globalClassesStylesProvider.actions.tracking?.({
-              event: "classCreated",
-              executedBy: "mcp_tool",
-              classId: newClassId
-            });
-            (0, import_editor_mcp2.dispatchMcpStylesAppliedEvent)({ styleValue: props });
-          } else {
-            throw new Error("error creating class");
-          }
-          break;
-        case "modify":
-          const updated = await attemptUpdate({
-            classId,
-            props,
-            customCss,
-            stylesProvider: globalClassesStylesProvider,
-            breakpoint: breakpointValue,
-            state
-          });
-          if (updated) {
-            result = { status: "ok", classId };
-            (0, import_editor_mcp2.dispatchMcpStylesAppliedEvent)({ styleValue: props });
-          } else {
-            throw new Error("error modifying class");
-          }
-          break;
-        default:
-          throw new Error(`Unsupported action ${action}`);
-      }
-    }
-  } catch (error) {
-    return {
-      status: "error",
-      message: `${action} failed: ${error.message || "Unknown error"}`
-    };
-  }
-  return result;
-};
-var initManageGlobalClasses = (reg) => {
-  const { addTool } = reg;
-  addTool({
-    name: "manage-global-classes",
-    requiredResources: [
-      { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { 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 applying them. Do NOT create classes for one-off styles.
-
-IMPORTANT: style must contain plaintext CSS rules per state \u2014 never pass empty strings.
-CSS is converted server-side in one bulk request; any declaration that cannot be converted is stored as the class custom CSS.
-
-Example \u2014 creating a flex column class:
-style.default = "display: flex; flex-direction: column; gap: 1rem;"
-
-Example \u2014 hover state:
-style.hover = "opacity: 0.85;"`,
-    schema,
-    outputSchema,
-    handler
-  });
-};
-async function attemptCreate(opts) {
-  const { props, customCss, breakpoint, className, stylesProvider, state } = opts;
-  const { create, delete: deleteClass2 } = stylesProvider.actions;
-  if (!className) {
-    throw new Error("Global class name is a required for creation");
-  }
-  if (!create || !deleteClass2) {
-    throw new Error("User is unable to create global classes");
-  }
-  const newClassId = create(className, [
-    {
-      meta: {
-        breakpoint,
-        state: state === "default" ? null : state
-      },
-      custom_css: customCss,
-      props
-    }
-  ]);
-  try {
-    await saveGlobalClasses2({ context: "frontend" });
-    return newClassId;
-  } catch {
-    deleteClass2(newClassId);
-    throw new Error("error creating class");
-  }
-}
-async function attemptUpdate(opts) {
-  const { props, customCss, breakpoint, classId, stylesProvider, state } = opts;
-  const { updateProps, update } = stylesProvider.actions;
-  if (!classId) {
-    throw new Error("Class ID is required for modification");
-  }
-  if (!updateProps || !update) {
-    throw new Error("User is unable to update global classes");
-  }
-  await loadExistingClasses([classId]);
-  const snapshot = structuredClone(stylesProvider.actions.all());
-  try {
-    updateProps({
-      id: classId,
-      props,
-      custom_css: customCss,
-      meta: {
-        breakpoint,
-        state: state === "default" ? null : state
-      }
-    });
-    await saveGlobalClasses2({ context: "frontend" });
-    return true;
-  } catch {
-    snapshot.forEach((style) => {
-      update({
-        id: style.id,
-        variants: style.variants
-      });
-    });
-    await saveGlobalClasses2({ context: "frontend" });
-    throw new Error("error updating class");
-  }
-}
-async function attemptDelete(opts) {
-  const { classId, stylesProvider } = opts;
-  const { delete: deleteClass2, create } = stylesProvider.actions;
-  if (!classId) {
-    throw new Error("Class ID is required for deletion");
-  }
-  if (!deleteClass2 || !create) {
-    throw new Error("User is unable to delete global classes");
-  }
-  const snapshot = structuredClone(stylesProvider.actions.all());
-  const targetClass = snapshot.find((style) => style.id === classId);
-  if (!targetClass) {
-    throw new Error(`Class with ID "${classId}" not found`);
-  }
-  deleteClass2(classId);
-  await saveGlobalClasses2({ context: "frontend" });
-  return true;
-}
-function collectNonEmptyStyleBlocks(style) {
-  const blocks = {};
-  Object.entries(style).forEach(([state, cssText]) => {
-    if (cssText?.trim()) {
-      blocks[state] = cssText.trim();
-    }
-  });
-  return blocks;
-}
-function toStoredCustomCss(customCss) {
-  if (!customCss?.trim()) {
-    return null;
-  }
-  return { raw: btoa(customCss) };
-}
-
 // src/mcp-integration/index.ts
 var initMcpIntegration = (reg, canvasMcpEntry) => {
   initMcpApplyUnapplyGlobalClasses(reg);
   initMcpApplyGetGlobalClassUsages(reg);
-  initManageGlobalClasses(reg);
+  initManageClassesTool(reg);
   initClassesResource(reg, canvasMcpEntry);
 };
 
@@ -3239,7 +3038,7 @@ var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 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 import_store32 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -3248,7 +3047,7 @@ function syncWithDocumentSave(panelActions) {
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store30.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store32.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
@@ -3291,7 +3090,7 @@ function bindBeforeSaveTemplateAction() {
   }));
 }
 function isDirty() {
-  return selectIsDirty((0, import_store30.__getState)());
+  return selectIsDirty((0, import_store32.__getState)());
 }
 
 // src/sync-with-document.tsx
@@ -3310,7 +3109,7 @@ function SyncWithDocumentSave() {
 
 // src/init.ts
 function init() {
-  (0, import_store32.__registerSlice)(slice);
+  (0, import_store34.__registerSlice)(slice);
   import_editor_embedded_documents_manager.embeddedDocumentsManager.onDocumentLoad((documentId) => {
     void addDocumentClasses(documentId);
   });
@@ -3344,7 +3143,7 @@ function init() {
     getThemeColor: (theme) => theme.palette.global.dark
   });
   initMcpIntegration(
-    (0, import_editor_mcp3.getMCPByDomain)("classes", {
+    (0, import_editor_mcp2.getMCPByDomain)("classes", {
       instructions: "MCP server for management of Elementor global classes",
       docs: `Everything related to V4 ( Atomic ) global classes.
 # Global classes
@@ -3353,7 +3152,7 @@ function init() {
 - Get details of a global class
 `
     }),
-    (0, import_editor_mcp3.getMCPByDomain)("canvas")
+    (0, import_editor_mcp2.getMCPByDomain)("canvas")
   );
 }
 // Annotate the CommonJS export names for ESM import in node: