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

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleDefinitionID } from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
@@ -20,6 +20,6 @@ type GlobalClassIndexEntry = {
 
 declare function addDocumentClasses(documentId: number): Promise<void>;
 
-declare function createLabelsForClasses(entries: GlobalClassIndexEntry[]): Record<StyleDefinitionID, string>;
+declare function createLabelsForClasses(entries: Array<GlobalClassIndexEntry | StyleDefinition>): Record<StyleDefinitionID, string>;
 
 export { ClassManagerPanelEmbedded, type ClassManagerPanelEmbeddedProps, GLOBAL_CLASSES_URI, type GlobalClassIndexEntry, addDocumentClasses, createLabelsForClasses, init, loadExistingClasses };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleDefinitionID } from '@elementor/editor-styles';
+import { StyleDefinitionID, StyleDefinition } from '@elementor/editor-styles';
 
 type ClassManagerPanelEmbeddedProps = {
     onRequestClose: () => void | Promise<void>;
@@ -20,6 +20,6 @@ type GlobalClassIndexEntry = {
 
 declare function addDocumentClasses(documentId: number): Promise<void>;
 
-declare function createLabelsForClasses(entries: GlobalClassIndexEntry[]): Record<StyleDefinitionID, string>;
+declare function createLabelsForClasses(entries: Array<GlobalClassIndexEntry | StyleDefinition>): Record<StyleDefinitionID, string>;
 
 export { ClassManagerPanelEmbedded, type ClassManagerPanelEmbeddedProps, GLOBAL_CLASSES_URI, type GlobalClassIndexEntry, addDocumentClasses, createLabelsForClasses, init, loadExistingClasses };

package/dist/index.js

@@ -282,6 +282,20 @@ var slice = (0, import_store.__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 };
     }
   }
 });
@@ -844,10 +858,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 && (0, import_utils4.hash)(state.items[id2]) !== (0, import_utils4.hash)(initialData.items[id2]);
     }),
@@ -2028,8 +2044,9 @@ var useFilteredCssClasses = () => {
     [cssClasses]
   );
   const filteredClasses = (0, import_react8.useMemo)(() => {
-    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]);
@@ -2527,7 +2544,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 = (0, import_editor_styles_repository2.createStylesProvider)({
@@ -2666,7 +2683,7 @@ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
@@ -2818,17 +2835,20 @@ var import_store28 = require("@elementor/store");
 function GlobalStylesImportListener() {
   const dispatch7 = (0, import_store28.__useDispatch)();
   (0, import_react11.useEffect)(() => {
-    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(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
@@ -2838,16 +2858,29 @@ function GlobalStylesImportListener() {
   return null;
 }
 
-// src/components/open-panel-from-url.tsx
+// src/components/open-panel-from-event.tsx
 var import_react12 = require("react");
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+function OpenPanelFromEvent() {
+  const { open } = usePanelActions();
+  (0, import_react12.useEffect)(() => {
+    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
+var import_react13 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react12.useRef)(false);
-  (0, import_react12.useEffect)(() => {
+  const hasOpened = (0, import_react13.useRef)(false);
+  (0, import_react13.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2868,10 +2901,10 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function PopulateStore() {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     loadCurrentDocumentClasses();
     (0, import_editor_v1_adapters5.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
@@ -2883,24 +2916,15 @@ function PopulateStore() {
 // 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");
-function initMcpApplyUnapplyGlobalClasses(server) {
-  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")
-    },
-    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!")
-    },
-    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
+var import_editor_mcp = require("@elementor/editor-mcp");
+var APPLY_GLOBAL_CLASS_GUIDE_URI = "elementor://global-classes/tools/apply-global-class-guide";
+var generateApplyGlobalClassGuidePrompt = () => {
+  const prompt = (0, import_editor_mcp.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.)
@@ -2909,18 +2933,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: 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")
+    },
+    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!")
+    },
+    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 = (0, import_editor_editing_panel.doGetAppliedClasses)(elementId);
@@ -2931,7 +2996,7 @@ function initMcpApplyUnapplyGlobalClasses(server) {
       };
     }
   });
-  server.addTool({
+  addTool({
     name: "unapply-global-class",
     schema: {
       classId: import_schema.z.string().describe("The ID of the class to unapply"),
@@ -2944,21 +3009,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 = (0, import_editor_editing_panel.doUnapplyClass)(elementId, classId);
@@ -2999,19 +3051,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();
@@ -3211,15 +3259,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
@@ -3309,16 +3349,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);
@@ -3326,7 +3356,7 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
@@ -3391,7 +3421,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const { open: openClassPanel } = usePanelActions();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const unsubscribe = (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
       const open = (0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel") ? () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
@@ -3431,6 +3461,10 @@ function init() {
       id: "global-classes-open-panel-from-url",
       component: OpenPanelFromUrl
     });
+    (0, import_editor.injectIntoLogic)({
+      id: "global-classes-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
   }
   (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
@@ -3445,8 +3479,16 @@ function init() {
     getThemeColor: (theme) => theme.palette.global.dark
   });
   initMcpIntegration(
-    (0, import_editor_mcp.getMCPByDomain)("classes", { instructions: "MCP server for management of Elementor global classes" }),
-    (0, import_editor_mcp.getMCPByDomain)("canvas")
+    (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
+- Create/update/delete global classes
+- Get list of global classes
+- Get details of a global class
+`
+    }),
+    (0, import_editor_mcp2.getMCPByDomain)("canvas")
   );
 }
 // Annotate the CommonJS export names for ESM import in node: