@elementor/editor-global-classes 4.1.0-838 → 4.1.0-beta2

package/dist/index.mjs

@@ -263,6 +263,20 @@ var slice = createSlice({
           state.classLabels[id2] = previewClassData.label;
         }
       });
+    },
+    setOrderWithoutHistory(state, { payload }) {
+      state.data.order = payload;
+    },
+    updateAfterTemplateImport(state, {
+      payload
+    }) {
+      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.order = [...state.initialData.preview.order, ...payload.addedIdsOrder];
+      state.data.items = { ...state.data.items, ...payload.addedItems };
+      state.data.order = [...state.data.order, ...payload.addedIdsOrder];
+      state.classLabels = { ...state.classLabels, ...payload.addedClassLabels };
     }
   }
 });
@@ -836,10 +850,12 @@ function calculateChanges(state, initialData) {
   const initialDataIds = Object.keys(initialData.items);
   const { order: stateOrder } = state;
   const { order: initialDataOrder } = initialData;
+  const stateOrderIdSet = new Set(stateOrder);
+  const deleted = initialDataOrder.filter((id2) => !stateOrderIdSet.has(id2));
   const order = stateOrder.join(";") !== initialDataOrder.join(";");
   return {
     added: stateIds.filter((id2) => !initialDataIds.includes(id2)),
-    deleted: initialDataIds.filter((id2) => !stateIds.includes(id2)),
+    deleted,
     modified: stateIds.filter((id2) => {
       return id2 in initialData.items && hash(state.items[id2]) !== hash(initialData.items[id2]);
     }),
@@ -2060,8 +2076,9 @@ var useFilteredCssClasses = () => {
     [cssClasses]
   );
   const filteredClasses = useMemo3(() => {
-    if (searchValue.length > 1) {
-      return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(searchValue.toLowerCase()));
+    const normalizedSearch = searchValue.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
+    if (normalizedSearch.length > 1) {
+      return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(normalizedSearch));
     }
     return cssClasses;
   }, [searchValue, cssClasses, lowercaseLabels]);
@@ -2574,7 +2591,7 @@ async function fetchAndMergeClasses() {
 }
 
 // src/global-classes-styles-provider.ts
-var MAX_CLASSES = 5e3;
+var MAX_CLASSES = 1e3;
 var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
 var PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/;
 var globalClassesStylesProvider = createStylesProvider({
@@ -2872,17 +2889,20 @@ import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
   const dispatch7 = useDispatch2();
   useEffect5(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedClasses = event.detail?.global_classes;
-      if (importedClasses?.items && importedClasses?.order) {
-        const { items } = importedClasses;
-        dispatch7(
-          slice.actions.mergeExistingClasses({
-            preview: items,
-            frontend: items
-          })
-        );
+    const handleGlobalStylesImported = async (event) => {
+      const customEvent = event;
+      const globalClasses = customEvent.detail?.global_classes;
+      if (!globalClasses?.added_items_order || !globalClasses?.added_items || globalClasses?.added_items_order?.length === 0) {
+        loadCurrentDocumentClasses();
+        return;
       }
+      dispatch7(
+        slice.actions.updateAfterTemplateImport({
+          addedItems: globalClasses.added_items,
+          addedIdsOrder: globalClasses.added_items_order,
+          addedClassLabels: createLabelsForClasses(Object.values(globalClasses.added_items))
+        })
+      );
     };
     window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2892,8 +2912,21 @@ function GlobalStylesImportListener() {
   return null;
 }
 
+// src/components/open-panel-from-event.tsx
+import { useEffect as useEffect6 } from "react";
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  useEffect6(() => {
+    const handler2 = () => open();
+    window.addEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
+    return () => window.removeEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
+  }, [open]);
+  return null;
+}
+
 // src/components/open-panel-from-url.tsx
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
@@ -2901,7 +2934,7 @@ var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
   const hasOpened = useRef3(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2922,10 +2955,10 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 function PopulateStore() {
-  useEffect7(() => {
+  useEffect8(() => {
     loadCurrentDocumentClasses();
     registerDataHook("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
@@ -2937,24 +2970,15 @@ function PopulateStore() {
 // src/mcp-integration/mcp-apply-unapply-global-classes.ts
 import { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from "@elementor/editor-editing-panel";
 import { z } from "@elementor/schema";
-function initMcpApplyUnapplyGlobalClasses(server) {
-  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")
-    },
-    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!")
-    },
-    name: "apply-global-class",
-    modelPreferences: {
-      intelligencePriority: 0.7,
-      speedPriority: 0.8
-    },
-    description: `Apply a global class to an element, enabling consistent styling through your design system.
 
-## When to use this tool:
+// src/mcp-integration/apply-global-class-guide-prompt.ts
+import { toolPrompts } from "@elementor/editor-mcp";
+var APPLY_GLOBAL_CLASS_GUIDE_URI = "elementor://global-classes/tools/apply-global-class-guide";
+var generateApplyGlobalClassGuidePrompt = () => {
+  const prompt = toolPrompts("apply-global-class");
+  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
 - When applying consistent typography styles (heading-primary, text-body, etc.)
@@ -2963,18 +2987,59 @@ function initMcpApplyUnapplyGlobalClasses(server) {
 
 **DO NOT use this tool** for:
 - Elements that don't share styles with other elements (use inline styles instead)
-- Layout-specific properties (those should remain inline in stylesConfig)
-
-## Prerequisites:
+- Layout-specific properties (those should remain inline in stylesConfig)`
+  );
+  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
 - 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
-
-## Best Practices:
+- Make sure you have the correct class ID that you want to apply`
+  );
+  prompt.instruction(
+    `## Best Practices:
 1. Apply multiple classes to a single element if needed (typography + color + spacing)
 2. After applying, the tool will remind you to remove duplicate inline styles from elementConfig
-3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`,
+3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`
+  );
+  return prompt.prompt();
+};
+
+// src/mcp-integration/mcp-apply-unapply-global-classes.ts
+function initMcpApplyUnapplyGlobalClasses(server) {
+  const { addTool, resource } = server;
+  const applyGlobalClassGuideText = generateApplyGlobalClassGuidePrompt();
+  resource(
+    "apply-global-class-guide",
+    APPLY_GLOBAL_CLASS_GUIDE_URI,
+    {
+      description: "Workflow, prerequisites, and best practices for apply-global-class",
+      mimeType: "text/plain",
+      title: "Apply global class tool guide"
+    },
+    async (uri) => ({
+      contents: [{ mimeType: "text/plain", text: applyGlobalClassGuideText, uri: uri.href }]
+    })
+  );
+  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")
+    },
+    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!")
+    },
+    name: "apply-global-class",
+    modelPreferences: {
+      intelligencePriority: 0.7,
+      speedPriority: 0.8
+    },
+    description: `Apply a global class to an element for shared design-system styling. Read the full guide at [${APPLY_GLOBAL_CLASS_GUIDE_URI}].`,
+    requiredResources: [
+      { description: "Apply global class tool guide", uri: APPLY_GLOBAL_CLASS_GUIDE_URI },
+      { description: "Global classes list", uri: GLOBAL_CLASSES_URI }
+    ],
     handler: async (params) => {
       const { classId, elementId } = params;
       const appliedClasses = doGetAppliedClasses(elementId);
@@ -2985,7 +3050,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       };
     }
   });
-  server.addTool({
+  addTool({
     name: "unapply-global-class",
     schema: {
       classId: z.string().describe("The ID of the class to unapply"),
@@ -2998,21 +3063,8 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       intelligencePriority: 0.7,
       speedPriority: 0.8
     },
-    description: `Unapply a (global) class from the current element
-
-## When to use this tool:
-- When a user requests to unapply a global class or a class from an element in the Elementor editor.
-- When you need to remove a specific class from an element's applied classes.
-
-## Prerequisites:
-- Ensure you have the most up-to-date list of classes applied to the element to avoid errors.
-  The list is available at always up-to-date resource 'elementor://global-classes'.
-- Make sure you have the correct class ID that you want to unapply.
-
-<note>
-If the user want to unapply a class by it's name and not ID, retrieve the id from the list, available at uri elementor://global-classes
-</note>
-`,
+    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 }],
     handler: async (params) => {
       const { classId, elementId } = params;
       const ok = doUnapplyClass(elementId, classId);
@@ -3053,19 +3105,15 @@ function initMcpApplyGetGlobalClassUsages(reg) {
       intelligencePriority: 0.6,
       speedPriority: 0.8
     },
-    description: `Retrieve the usages of global-classes ACROSS PAGES designed by Elementor editor.
-
-## Prerequisites: CRITICAL
-- The list of global classes and their applid values is available at resource uri elementor://global-classes
+    description: `Retrieve usages of global classes across all Elementor pages. Heavy operation \u2014 scans every page in the site.
 
-## When to use this tool:
-- When a user requests to see where a specific global class is being used across the site.
-- When you need to manage or clean up unused global classes.
-- Before deleting a global class, to ensure it is not in use in any other pages.
+## When to use:
+- Before deleting or radically changing a class \u2014 to understand cross-page side effects and decide whether to consult the user.
+- To identify unused global classes for cleanup.
 
-## When NOT to use this tool:
-- For getting the list of global classes, refer to the resource at uri elementor://global-classes
-`,
+## When NOT to use:
+- To list global classes themselves \u2014 use the global-classes resource instead (this tool returns usages, not the class list).`,
+    requiredResources: [{ description: "Global classes list", uri: GLOBAL_CLASSES_URI }],
     outputSchema: globalClassesUsageSchema,
     handler: async () => {
       const data = await fetchCssClassUsage();
@@ -3265,15 +3313,7 @@ var initManageGlobalClasses = (reg) => {
       intelligencePriority: 0.85,
       speedPriority: 0.6
     },
-    description: `Manages global classes (create/modify) in Elementor editor. Check [elementor://global-classes] and style schemas first.
-
-CREATE: Requires globalClassName, props. Use semantic naming (heading-primary, button-cta, text-muted). Check existing classes to avoid duplicates. ALWAYS create global classes BEFORE compositions for reusable styles.
-MODIFY: Requires classId, props. Get classId from [elementor://global-classes] resource.
-
-Naming pattern: [element-type]-[purpose/variant]-[modifier]
-DO NOT create global classes for: one-off styles, layout-specific properties.
-
-Use style schema at [elementor://styles/schema/{category}] for valid props. Errors include exact schema mismatch details.`,
+    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.`,
     schema,
     outputSchema,
     handler
@@ -3363,16 +3403,6 @@ async function attemptDelete(opts) {
 
 // src/mcp-integration/index.ts
 var initMcpIntegration = (reg, canvasMcpEntry) => {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) global classes.
-# Global classes
-- Create/update/delete global classes
-- Get list of global classes
-- Get details of a global class
-- Get details of a global class
-`
-  );
   initMcpApplyUnapplyGlobalClasses(reg);
   initMcpApplyGetGlobalClassUsages(reg);
   initManageGlobalClasses(reg);
@@ -3380,7 +3410,7 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { __privateListenTo as listenTo2, isExperimentActive as isExperimentActive3, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
@@ -3445,7 +3475,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const { open: openClassPanel } = usePanelActions();
-  useEffect8(() => {
+  useEffect9(() => {
     const unsubscribe = listenTo2(v1ReadyEvent(), () => {
       const open = isExperimentActive3("e_editor_design_system_panel") ? () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
@@ -3485,6 +3515,10 @@ function init() {
       id: "global-classes-open-panel-from-url",
       component: OpenPanelFromUrl
     });
+    injectIntoLogic({
+      id: "global-classes-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
   }
   injectIntoCssClassConvert({
     id: "global-classes-convert-from-local-class",
@@ -3499,7 +3533,15 @@ function init() {
     getThemeColor: (theme) => theme.palette.global.dark
   });
   initMcpIntegration(
-    getMCPByDomain("classes", { instructions: "MCP server for management of Elementor global classes" }),
+    getMCPByDomain("classes", {
+      instructions: "MCP server for management of Elementor global classes",
+      docs: `Everything related to V4 ( Atomic ) global classes.
+# Global classes
+- Create/update/delete global classes
+- Get list of global classes
+- Get details of a global class
+`
+    }),
     getMCPByDomain("canvas")
   );
 }