@elementor/editor-global-classes 4.3.0-998 → 4.3.0-beta1

package/dist/index.mjs

@@ -144,12 +144,16 @@ var slice = createSlice({
       state.isDirty = true;
     },
     update(state, { payload }) {
+      const oldLabel = state.classLabels[payload.style.id];
       localHistory.next(state.data);
       const style = state.data.items[payload.style.id];
       const mergedData = {
         ...style,
         ...payload.style
       };
+      if (oldLabel && payload.style.label && payload.style.label !== oldLabel) {
+        state.classLabels[payload.style.id] = payload.style.label;
+      }
       state.data.items[payload.style.id] = mergedData;
       state.isDirty = true;
     },
@@ -251,9 +255,15 @@ var slice = createSlice({
     updateAfterTemplateImport(state, {
       payload
     }) {
-      state.initialData.frontend.items = { ...state.initialData.frontend.items, ...payload.addedItems };
+      state.initialData.frontend.items = {
+        ...state.initialData.frontend.items,
+        ...payload.addedItems
+      };
       state.initialData.frontend.order = [...state.initialData.frontend.order, ...payload.addedIdsOrder];
-      state.initialData.preview.items = { ...state.initialData.preview.items, ...payload.addedItems };
+      state.initialData.preview.items = {
+        ...state.initialData.preview.items,
+        ...payload.addedItems
+      };
       state.initialData.preview.order = [...state.initialData.preview.order, ...payload.addedIdsOrder];
       state.data.items = { ...state.data.items, ...payload.addedItems };
       state.data.order = [...state.data.order, ...payload.addedIdsOrder];
@@ -1988,7 +1998,7 @@ var GlobalClassesList = ({
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch7 = useDispatch();
+  const dispatch8 = useDispatch();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = useState5(null);
   const [loading, setLoading] = useState5({});
@@ -2021,22 +2031,22 @@ var GlobalClassesList = ({
     }
   });
   useEffect2(() => {
-    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);
   }
@@ -2096,7 +2106,7 @@ var GlobalClassesList = ({
                     source: "class-manager"
                   });
                   void await loadExistingClasses([cssClass.id]);
-                  dispatch7(
+                  dispatch8(
                     slice.actions.update({
                       style: {
                         id: cssClass.id,
@@ -2122,7 +2132,7 @@ var GlobalClassesList = ({
                 } else if (newValue && onStartSyncRequest) {
                   onStartSyncRequest(id);
                 } else {
-                  dispatch7(
+                  dispatch8(
                     slice.actions.update({
                       style: {
                         id,
@@ -2149,10 +2159,10 @@ var StyledHeader = styled6(Typography8)(({ theme, variant }) => ({
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch7 = useDispatch();
+  const dispatch8 = useDispatch();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    dispatch7(slice.actions.setOrder(newIds));
+    dispatch8(slice.actions.setOrder(newIds));
     if (draggedItemId) {
       trackGlobalClasses({
         event: "classManagerReorder",
@@ -2523,19 +2533,14 @@ import {
 import { __ as __15 } from "@wordpress/i18n";
 
 // src/capabilities.ts
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
 var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
 var getCapabilities = () => {
-  const shouldEnforceCapabilities = isExperimentActive(EXPERIMENT_KEY);
-  if (shouldEnforceCapabilities) {
-    return {
-      update: UPDATE_CLASS_CAPABILITY_KEY,
-      create: UPDATE_CLASS_CAPABILITY_KEY,
-      delete: UPDATE_CLASS_CAPABILITY_KEY,
-      updateProps: UPDATE_CLASS_CAPABILITY_KEY
-    };
-  }
+  return {
+    update: UPDATE_CLASS_CAPABILITY_KEY,
+    create: UPDATE_CLASS_CAPABILITY_KEY,
+    delete: UPDATE_CLASS_CAPABILITY_KEY,
+    updateProps: UPDATE_CLASS_CAPABILITY_KEY
+  };
 };
 
 // src/global-classes-styles-provider.ts
@@ -2788,7 +2793,7 @@ import { useEffect as useEffect5 } from "react";
 import { GLOBAL_STYLES_IMPORTED_EVENT } from "@elementor/editor-canvas";
 import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
-  const dispatch7 = useDispatch2();
+  const dispatch8 = useDispatch2();
   useEffect5(() => {
     const handleGlobalStylesImported = async (event) => {
       const customEvent = event;
@@ -2797,7 +2802,7 @@ function GlobalStylesImportListener() {
         loadCurrentDocumentClasses();
         return;
       }
-      dispatch7(
+      dispatch8(
         slice.actions.updateAfterTemplateImport({
           addedItems: globalClasses.added_items,
           addedIdsOrder: globalClasses.added_items_order,
@@ -2809,7 +2814,7 @@ function GlobalStylesImportListener() {
     return () => {
       window.removeEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
-  }, [dispatch7]);
+  }, [dispatch8]);
   return null;
 }
 
@@ -2826,9 +2831,78 @@ function PopulateStore() {
   return null;
 }
 
+// src/mcp-integration/manage-classes-tool.ts
+import { httpService as httpService2 } from "@elementor/http-client";
+import { z } from "@elementor/schema";
+import { __dispatch as dispatch7 } from "@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. Bulk create, update, or delete using raw CSS declarations (up to 50 operations). Duplicate labels are auto-renamed with a DUP_ prefix.",
+    schema: {
+      action: z.enum(["create", "update", "delete"]),
+      id: z.string().optional().describe("Class id \u2014 required for update/delete. Get from the global-classes resource."),
+      label: z.string().optional().describe("Class label (lowercase, dash-separated) \u2014 required for create/update."),
+      css: z.string().optional().describe(
+        'Plain CSS string. Supports &:hover/&:focus/&:active nesting and @media(--breakpoint) blocks. font-family must be a single Google Font name (no fallback stacks). In patch mode: "prop: null" removes that prop; "all: null" wipes the variant.'
+      ),
+      mode: z.enum(["patch", "replace"]).optional().describe(
+        "Merge strategy for update \u2014 patch (default): merge incoming props with existing; replace: discard all existing variants for the affected breakpoints."
+      )
+    },
+    outputSchema: {
+      status: z.enum(["ok"]).describe("Operation status"),
+      id: z.string().optional().describe("ID of the affected class \u2014 use for subsequent update/delete calls."),
+      label: z.string().optional().describe("Final label of the class after any auto-rename.")
+    },
+    requiredResources: [
+      {
+        uri: GLOBAL_CLASSES_URI,
+        description: "Current global classes \u2014 check before creating to avoid duplicates"
+      }
+    ],
+    isDestructive: true,
+    handler: async (params) => {
+      const { data } = await httpService2().post(MCP_PROXY_URL, {
+        tool: TOOL_NAME,
+        input: { operations: [params] }
+      });
+      const result = data.data.results?.[0];
+      const { create, update, delete: del } = globalClassesStylesProvider.actions;
+      switch (params.action) {
+        case "create":
+          if (result && create) {
+            create(result.label, result.variants, result.id);
+          }
+          break;
+        case "update":
+          if (result && update) {
+            update(result);
+          }
+          break;
+        case "delete":
+          if (params.id && del) {
+            del(params.id);
+          }
+          break;
+      }
+      dispatch7(slice.actions.reset({ context: "frontend" }));
+      window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: "frontend" } }));
+      return {
+        status: "ok",
+        id: result?.id,
+        label: result?.label
+      };
+    }
+  });
+};
+
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from "@elementor/editor-editing-panel";
-import { z } from "@elementor/schema";
+import { z as z2 } from "@elementor/schema";
 
 // src/mcp-integration/apply-global-class-guide-prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
@@ -2838,8 +2912,8 @@ var generateApplyGlobalClassGuidePrompt = () => {
   prompt.description("Apply a global class to an element, enabling consistent styling through your design system.");
   prompt.instruction(
     `## When to use this tool:
-**ALWAYS use this IMMEDIATELY AFTER building compositions** to apply the global classes you created beforehand:
-- After using "build-compositions" tool, apply semantic classes to the created elements
+**ALWAYS use this IMMEDIATELY AFTER creating or updating elements** to apply the global classes you created beforehand:
+- After adding elements to the canvas, apply semantic classes to them
 - When applying consistent typography styles (heading-primary, text-body, etc.)
 - When applying theme colors or brand styles (bg-brand, button-cta, etc.)
 - When ensuring spacing consistency (spacing-section-large, etc.)
@@ -2851,7 +2925,7 @@ var generateApplyGlobalClassGuidePrompt = () => {
   prompt.instruction(
     `## Prerequisites:
 - **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource
-- **REQUIRED**: Get element IDs from the composition XML returned by "build-compositions" tool
+- **REQUIRED**: Get element IDs from the page structure or selected element resources
 - Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates
 - Make sure you have the correct class ID that you want to apply`
   );
@@ -2882,12 +2956,12 @@ function initMcpApplyUnapplyGlobalClasses(server) {
   );
   addTool({
     schema: {
-      classId: z.string().describe("The ID of the class to apply"),
-      elementId: z.string().describe("The ID of the element to which the class will be applied")
+      classId: z2.string().describe("The ID of the class to apply"),
+      elementId: z2.string().describe("The ID of the element to which the class will be applied")
     },
     outputSchema: {
-      result: z.string().describe("Result message indicating the success of the apply operation"),
-      llm_instructions: z.string().describe("Instructions what to do next, Important to follow these instructions!")
+      result: z2.string().describe("Result message indicating the success of the apply operation"),
+      llm_instructions: z2.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}].`,
@@ -2913,11 +2987,11 @@ function initMcpApplyUnapplyGlobalClasses(server) {
   addTool({
     name: "unapply-global-class",
     schema: {
-      classId: z.string().describe("The ID of the class to unapply"),
-      elementId: z.string().describe("The ID of the element from which the class will be unapplied")
+      classId: z2.string().describe("The ID of the class to unapply"),
+      elementId: z2.string().describe("The ID of the element from which the class will be unapplied")
     },
     outputSchema: {
-      result: z.string().describe("Result message indicating the success of the unapply operation")
+      result: z2.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 }],
@@ -2935,21 +3009,21 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 }
 
 // src/mcp-integration/mcp-get-global-class-usages.ts
-import { z as z2 } from "@elementor/schema";
+import { z as z3 } from "@elementor/schema";
 function initMcpApplyGetGlobalClassUsages(reg) {
   const { addTool } = reg;
   const globalClassesUsageSchema = {
-    usages: z2.array(
-      z2.object({
-        classId: z2.string().describe(
+    usages: z3.array(
+      z3.object({
+        classId: z3.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: z2.array(
-          z2.object({
-            pageId: z2.string().describe("The ID of the page where the class is used"),
-            title: z2.string().describe("The title of the page where the class is used"),
-            total: z2.number().describe("The number of times the class is used on this page"),
-            elements: z2.array(z2.string()).describe("List of element IDs using this class on the page")
+        usages: z3.array(
+          z3.object({
+            pageId: z3.string().describe("The ID of the page where the class is used"),
+            title: z3.string().describe("The title of the page where the class is used"),
+            total: z3.number().describe("The number of times the class is used on this page"),
+            elements: z3.array(z3.string()).describe("List of element IDs using this class on the page")
           })
         )
       })
@@ -2997,270 +3071,11 @@ function initMcpApplyGetGlobalClassUsages(reg) {
   });
 }
 
-// src/mcp-integration/mcp-manage-global-classes.ts
-import { BREAKPOINTS_SCHEMA_FULL_URI, convertStyleBlocksToAtomic } from "@elementor/editor-canvas";
-import { dispatchMcpStylesAppliedEvent } from "@elementor/editor-mcp";
-import { z as z3 } from "@elementor/schema";
-var schema = {
-  action: z3.enum(["create", "modify", "delete"]).describe("Operation to perform"),
-  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)"),
-  style: z3.object({
-    default: z3.string().describe("Plaintext CSS for the default state. MUST be non-empty \u2014 blank strings are rejected."),
-    hover: z3.string().describe("Plaintext CSS for the :hover state. optional").optional(),
-    focus: z3.string().describe("Plaintext CSS for the :focus state. optional").optional(),
-    active: z3.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: 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).")
-};
-var outputSchema = {
-  status: z3.enum(["ok", "error"]).describe("Operation status"),
-  classId: z3.string().optional().describe("Class ID (returned on create success)"),
-  message: z3.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 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
-            });
-            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 };
-            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: 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);
 };