@elementor/editor-global-classes 4.3.0-999 → 4.4.0-1064

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -181,12 +181,16 @@ var slice = (0, import_store.__createSlice)({
181
181
  state.isDirty = true;
182
182
  },
183
183
  update(state, { payload }) {
184
+ const oldLabel = state.classLabels[payload.style.id];
184
185
  localHistory.next(state.data);
185
186
  const style = state.data.items[payload.style.id];
186
187
  const mergedData = {
187
188
  ...style,
188
189
  ...payload.style
189
190
  };
191
+ if (oldLabel && payload.style.label && payload.style.label !== oldLabel) {
192
+ state.classLabels[payload.style.id] = payload.style.label;
193
+ }
190
194
  state.data.items[payload.style.id] = mergedData;
191
195
  state.isDirty = true;
192
196
  },
@@ -288,9 +292,15 @@ var slice = (0, import_store.__createSlice)({
288
292
  updateAfterTemplateImport(state, {
289
293
  payload
290
294
  }) {
291
- state.initialData.frontend.items = { ...state.initialData.frontend.items, ...payload.addedItems };
295
+ state.initialData.frontend.items = {
296
+ ...state.initialData.frontend.items,
297
+ ...payload.addedItems
298
+ };
292
299
  state.initialData.frontend.order = [...state.initialData.frontend.order, ...payload.addedIdsOrder];
293
- state.initialData.preview.items = { ...state.initialData.preview.items, ...payload.addedItems };
300
+ state.initialData.preview.items = {
301
+ ...state.initialData.preview.items,
302
+ ...payload.addedItems
303
+ };
294
304
  state.initialData.preview.order = [...state.initialData.preview.order, ...payload.addedIdsOrder];
295
305
  state.data.items = { ...state.data.items, ...payload.addedItems };
296
306
  state.data.order = [...state.data.order, ...payload.addedIdsOrder];
@@ -1974,7 +1984,7 @@ var GlobalClassesList = ({
1974
1984
  search: { debouncedValue: searchValue }
1975
1985
  } = useSearchAndFilters();
1976
1986
  const cssClasses = useOrderedClasses();
1977
- const dispatch7 = (0, import_store20.__useDispatch)();
1987
+ const dispatch8 = (0, import_store20.__useDispatch)();
1978
1988
  const filters = useFilters();
1979
1989
  const [draggedItemId, setDraggedItemId] = (0, import_react8.useState)(null);
1980
1990
  const [loading, setLoading] = (0, import_react8.useState)({});
@@ -2007,22 +2017,22 @@ var GlobalClassesList = ({
2007
2017
  }
2008
2018
  });
2009
2019
  (0, import_react8.useEffect)(() => {
2010
- const handler2 = (event) => {
2020
+ const handler = (event) => {
2011
2021
  if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
2012
2022
  event.stopImmediatePropagation();
2013
2023
  event.preventDefault();
2014
2024
  if (event.shiftKey) {
2015
- dispatch7(slice.actions.redo());
2025
+ dispatch8(slice.actions.redo());
2016
2026
  return;
2017
2027
  }
2018
- dispatch7(slice.actions.undo());
2028
+ dispatch8(slice.actions.undo());
2019
2029
  }
2020
2030
  };
2021
- window.addEventListener("keydown", handler2, {
2031
+ window.addEventListener("keydown", handler, {
2022
2032
  capture: true
2023
2033
  });
2024
- return () => window.removeEventListener("keydown", handler2);
2025
- }, [dispatch7]);
2034
+ return () => window.removeEventListener("keydown", handler);
2035
+ }, [dispatch8]);
2026
2036
  if (!cssClasses?.length) {
2027
2037
  return /* @__PURE__ */ React17.createElement(EmptyState, null);
2028
2038
  }
@@ -2082,7 +2092,7 @@ var GlobalClassesList = ({
2082
2092
  source: "class-manager"
2083
2093
  });
2084
2094
  void await loadExistingClasses([cssClass.id]);
2085
- dispatch7(
2095
+ dispatch8(
2086
2096
  slice.actions.update({
2087
2097
  style: {
2088
2098
  id: cssClass.id,
@@ -2108,7 +2118,7 @@ var GlobalClassesList = ({
2108
2118
  } else if (newValue && onStartSyncRequest) {
2109
2119
  onStartSyncRequest(id);
2110
2120
  } else {
2111
- dispatch7(
2121
+ dispatch8(
2112
2122
  slice.actions.update({
2113
2123
  style: {
2114
2124
  id,
@@ -2135,10 +2145,10 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
2135
2145
  }
2136
2146
  }));
2137
2147
  var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
2138
- const dispatch7 = (0, import_store20.__useDispatch)();
2148
+ const dispatch8 = (0, import_store20.__useDispatch)();
2139
2149
  const order = useClassesOrder();
2140
2150
  const reorder = (newIds) => {
2141
- dispatch7(slice.actions.setOrder(newIds));
2151
+ dispatch8(slice.actions.setOrder(newIds));
2142
2152
  if (draggedItemId) {
2143
2153
  trackGlobalClasses({
2144
2154
  event: "classManagerReorder",
@@ -2494,19 +2504,14 @@ var import_store24 = require("@elementor/store");
2494
2504
  var import_i18n15 = require("@wordpress/i18n");
2495
2505
 
2496
2506
  // src/capabilities.ts
2497
- var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
2498
- var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
2499
2507
  var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
2500
2508
  var getCapabilities = () => {
2501
- const shouldEnforceCapabilities = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENT_KEY);
2502
- if (shouldEnforceCapabilities) {
2503
- return {
2504
- update: UPDATE_CLASS_CAPABILITY_KEY,
2505
- create: UPDATE_CLASS_CAPABILITY_KEY,
2506
- delete: UPDATE_CLASS_CAPABILITY_KEY,
2507
- updateProps: UPDATE_CLASS_CAPABILITY_KEY
2508
- };
2509
- }
2509
+ return {
2510
+ update: UPDATE_CLASS_CAPABILITY_KEY,
2511
+ create: UPDATE_CLASS_CAPABILITY_KEY,
2512
+ delete: UPDATE_CLASS_CAPABILITY_KEY,
2513
+ updateProps: UPDATE_CLASS_CAPABILITY_KEY
2514
+ };
2510
2515
  };
2511
2516
 
2512
2517
  // src/global-classes-styles-provider.ts
@@ -2650,9 +2655,9 @@ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
2650
2655
  var import_editor = require("@elementor/editor");
2651
2656
  var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
2652
2657
  var import_editor_embedded_documents_manager = require("@elementor/editor-embedded-documents-manager");
2653
- var import_editor_mcp3 = require("@elementor/editor-mcp");
2658
+ var import_editor_mcp2 = require("@elementor/editor-mcp");
2654
2659
  var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
2655
- var import_store32 = require("@elementor/store");
2660
+ var import_store34 = require("@elementor/store");
2656
2661
 
2657
2662
  // src/components/class-manager/class-manager-button.tsx
2658
2663
  var React20 = __toESM(require("react"));
@@ -2755,7 +2760,7 @@ var import_react11 = require("react");
2755
2760
  var import_editor_canvas = require("@elementor/editor-canvas");
2756
2761
  var import_store28 = require("@elementor/store");
2757
2762
  function GlobalStylesImportListener() {
2758
- const dispatch7 = (0, import_store28.__useDispatch)();
2763
+ const dispatch8 = (0, import_store28.__useDispatch)();
2759
2764
  (0, import_react11.useEffect)(() => {
2760
2765
  const handleGlobalStylesImported = async (event) => {
2761
2766
  const customEvent = event;
@@ -2764,7 +2769,7 @@ function GlobalStylesImportListener() {
2764
2769
  loadCurrentDocumentClasses();
2765
2770
  return;
2766
2771
  }
2767
- dispatch7(
2772
+ dispatch8(
2768
2773
  slice.actions.updateAfterTemplateImport({
2769
2774
  addedItems: globalClasses.added_items,
2770
2775
  addedIdsOrder: globalClasses.added_items_order,
@@ -2776,26 +2781,95 @@ function GlobalStylesImportListener() {
2776
2781
  return () => {
2777
2782
  window.removeEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
2778
2783
  };
2779
- }, [dispatch7]);
2784
+ }, [dispatch8]);
2780
2785
  return null;
2781
2786
  }
2782
2787
 
2783
2788
  // src/components/populate-store.tsx
2784
2789
  var import_react12 = require("react");
2785
- var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
2790
+ var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
2786
2791
  function PopulateStore() {
2787
2792
  (0, import_react12.useEffect)(() => {
2788
2793
  loadCurrentDocumentClasses();
2789
- (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
2794
+ (0, import_editor_v1_adapters.registerDataHook)("after", "editor/documents/attach-preview", async () => {
2790
2795
  await loadCurrentDocumentClasses();
2791
2796
  });
2792
2797
  }, []);
2793
2798
  return null;
2794
2799
  }
2795
2800
 
2801
+ // src/mcp-integration/manage-classes-tool.ts
2802
+ var import_http_client2 = require("@elementor/http-client");
2803
+ var import_schema = require("@elementor/schema");
2804
+ var import_store30 = require("@elementor/store");
2805
+ var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
2806
+ var TOOL_NAME = "manage-classes";
2807
+ var initManageClassesTool = (reg) => {
2808
+ const { addTool } = reg;
2809
+ addTool({
2810
+ name: TOOL_NAME,
2811
+ 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.",
2812
+ schema: {
2813
+ action: import_schema.z.enum(["create", "update", "delete"]),
2814
+ id: import_schema.z.string().optional().describe("Class id \u2014 required for update/delete. Get from the global-classes resource."),
2815
+ label: import_schema.z.string().optional().describe("Class label (lowercase, dash-separated) \u2014 required for create/update."),
2816
+ css: import_schema.z.string().optional().describe(
2817
+ '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.'
2818
+ ),
2819
+ mode: import_schema.z.enum(["patch", "replace"]).optional().describe(
2820
+ "Merge strategy for update \u2014 patch (default): merge incoming props with existing; replace: discard all existing variants for the affected breakpoints."
2821
+ )
2822
+ },
2823
+ outputSchema: {
2824
+ status: import_schema.z.enum(["ok"]).describe("Operation status"),
2825
+ id: import_schema.z.string().optional().describe("ID of the affected class \u2014 use for subsequent update/delete calls."),
2826
+ label: import_schema.z.string().optional().describe("Final label of the class after any auto-rename.")
2827
+ },
2828
+ requiredResources: [
2829
+ {
2830
+ uri: GLOBAL_CLASSES_URI,
2831
+ description: "Current global classes \u2014 check before creating to avoid duplicates"
2832
+ }
2833
+ ],
2834
+ isDestructive: true,
2835
+ handler: async (params) => {
2836
+ const { data } = await (0, import_http_client2.httpService)().post(MCP_PROXY_URL, {
2837
+ tool: TOOL_NAME,
2838
+ input: { operations: [params] }
2839
+ });
2840
+ const result = data.data.results?.[0];
2841
+ const { create, update, delete: del } = globalClassesStylesProvider.actions;
2842
+ switch (params.action) {
2843
+ case "create":
2844
+ if (result && create) {
2845
+ create(result.label, result.variants, result.id);
2846
+ }
2847
+ break;
2848
+ case "update":
2849
+ if (result && update) {
2850
+ update(result);
2851
+ }
2852
+ break;
2853
+ case "delete":
2854
+ if (params.id && del) {
2855
+ del(params.id);
2856
+ }
2857
+ break;
2858
+ }
2859
+ (0, import_store30.__dispatch)(slice.actions.reset({ context: "frontend" }));
2860
+ window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: "frontend" } }));
2861
+ return {
2862
+ status: "ok",
2863
+ id: result?.id,
2864
+ label: result?.label
2865
+ };
2866
+ }
2867
+ });
2868
+ };
2869
+
2796
2870
  // src/mcp-integration/mcp-apply-unapply-global-classes.ts
2797
2871
  var import_editor_editing_panel = require("@elementor/editor-editing-panel");
2798
- var import_schema = require("@elementor/schema");
2872
+ var import_schema2 = require("@elementor/schema");
2799
2873
 
2800
2874
  // src/mcp-integration/apply-global-class-guide-prompt.ts
2801
2875
  var import_editor_mcp = require("@elementor/editor-mcp");
@@ -2805,8 +2879,8 @@ var generateApplyGlobalClassGuidePrompt = () => {
2805
2879
  prompt.description("Apply a global class to an element, enabling consistent styling through your design system.");
2806
2880
  prompt.instruction(
2807
2881
  `## When to use this tool:
2808
- **ALWAYS use this IMMEDIATELY AFTER building compositions** to apply the global classes you created beforehand:
2809
- - After using "build-compositions" tool, apply semantic classes to the created elements
2882
+ **ALWAYS use this IMMEDIATELY AFTER creating or updating elements** to apply the global classes you created beforehand:
2883
+ - After adding elements to the canvas, apply semantic classes to them
2810
2884
  - When applying consistent typography styles (heading-primary, text-body, etc.)
2811
2885
  - When applying theme colors or brand styles (bg-brand, button-cta, etc.)
2812
2886
  - When ensuring spacing consistency (spacing-section-large, etc.)
@@ -2818,7 +2892,7 @@ var generateApplyGlobalClassGuidePrompt = () => {
2818
2892
  prompt.instruction(
2819
2893
  `## Prerequisites:
2820
2894
  - **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource
2821
- - **REQUIRED**: Get element IDs from the composition XML returned by "build-compositions" tool
2895
+ - **REQUIRED**: Get element IDs from the page structure or selected element resources
2822
2896
  - Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates
2823
2897
  - Make sure you have the correct class ID that you want to apply`
2824
2898
  );
@@ -2849,12 +2923,12 @@ function initMcpApplyUnapplyGlobalClasses(server) {
2849
2923
  );
2850
2924
  addTool({
2851
2925
  schema: {
2852
- classId: import_schema.z.string().describe("The ID of the class to apply"),
2853
- elementId: import_schema.z.string().describe("The ID of the element to which the class will be applied")
2926
+ classId: import_schema2.z.string().describe("The ID of the class to apply"),
2927
+ elementId: import_schema2.z.string().describe("The ID of the element to which the class will be applied")
2854
2928
  },
2855
2929
  outputSchema: {
2856
- result: import_schema.z.string().describe("Result message indicating the success of the apply operation"),
2857
- llm_instructions: import_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!")
2930
+ result: import_schema2.z.string().describe("Result message indicating the success of the apply operation"),
2931
+ llm_instructions: import_schema2.z.string().describe("Instructions what to do next, Important to follow these instructions!")
2858
2932
  },
2859
2933
  name: "apply-global-class",
2860
2934
  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 +2954,11 @@ function initMcpApplyUnapplyGlobalClasses(server) {
2880
2954
  addTool({
2881
2955
  name: "unapply-global-class",
2882
2956
  schema: {
2883
- classId: import_schema.z.string().describe("The ID of the class to unapply"),
2884
- elementId: import_schema.z.string().describe("The ID of the element from which the class will be unapplied")
2957
+ classId: import_schema2.z.string().describe("The ID of the class to unapply"),
2958
+ elementId: import_schema2.z.string().describe("The ID of the element from which the class will be unapplied")
2885
2959
  },
2886
2960
  outputSchema: {
2887
- result: import_schema.z.string().describe("Result message indicating the success of the unapply operation")
2961
+ result: import_schema2.z.string().describe("Result message indicating the success of the unapply operation")
2888
2962
  },
2889
2963
  description: `Unapply a global class from an element by class ID. Resolve class names to IDs via [${GLOBAL_CLASSES_URI}].`,
2890
2964
  requiredResources: [{ description: "Global classes list", uri: GLOBAL_CLASSES_URI }],
@@ -2902,21 +2976,21 @@ function initMcpApplyUnapplyGlobalClasses(server) {
2902
2976
  }
2903
2977
 
2904
2978
  // src/mcp-integration/mcp-get-global-class-usages.ts
2905
- var import_schema2 = require("@elementor/schema");
2979
+ var import_schema3 = require("@elementor/schema");
2906
2980
  function initMcpApplyGetGlobalClassUsages(reg) {
2907
2981
  const { addTool } = reg;
2908
2982
  const globalClassesUsageSchema = {
2909
- usages: import_schema2.z.array(
2910
- import_schema2.z.object({
2911
- classId: import_schema2.z.string().describe(
2983
+ usages: import_schema3.z.array(
2984
+ import_schema3.z.object({
2985
+ classId: import_schema3.z.string().describe(
2912
2986
  'The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'
2913
2987
  ),
2914
- usages: import_schema2.z.array(
2915
- import_schema2.z.object({
2916
- pageId: import_schema2.z.string().describe("The ID of the page where the class is used"),
2917
- title: import_schema2.z.string().describe("The title of the page where the class is used"),
2918
- total: import_schema2.z.number().describe("The number of times the class is used on this page"),
2919
- elements: import_schema2.z.array(import_schema2.z.string()).describe("List of element IDs using this class on the page")
2988
+ usages: import_schema3.z.array(
2989
+ import_schema3.z.object({
2990
+ pageId: import_schema3.z.string().describe("The ID of the page where the class is used"),
2991
+ title: import_schema3.z.string().describe("The title of the page where the class is used"),
2992
+ total: import_schema3.z.number().describe("The number of times the class is used on this page"),
2993
+ elements: import_schema3.z.array(import_schema3.z.string()).describe("List of element IDs using this class on the page")
2920
2994
  })
2921
2995
  )
2922
2996
  })
@@ -2964,282 +3038,23 @@ function initMcpApplyGetGlobalClassUsages(reg) {
2964
3038
  });
2965
3039
  }
2966
3040
 
2967
- // src/mcp-integration/mcp-manage-global-classes.ts
2968
- var import_editor_canvas2 = require("@elementor/editor-canvas");
2969
- var import_editor_mcp2 = require("@elementor/editor-mcp");
2970
- var import_schema3 = require("@elementor/schema");
2971
- var schema = {
2972
- action: import_schema3.z.enum(["create", "modify", "delete"]).describe("Operation to perform"),
2973
- classId: import_schema3.z.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),
2974
- globalClassName: import_schema3.z.string().optional().describe("Global class name (required for create)"),
2975
- style: import_schema3.z.object({
2976
- default: import_schema3.z.string().describe("Plaintext CSS for the default state. MUST be non-empty \u2014 blank strings are rejected."),
2977
- hover: import_schema3.z.string().describe("Plaintext CSS for the :hover state. optional").optional(),
2978
- focus: import_schema3.z.string().describe("Plaintext CSS for the :focus state. optional").optional(),
2979
- active: import_schema3.z.string().describe("Plaintext CSS for the :active state. optional").optional()
2980
- }).describe(
2981
- "Plaintext CSS per pseudo-state. All states are converted in one bulk request; unconvertible declarations are stored as custom CSS."
2982
- ),
2983
- 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).")
2984
- };
2985
- var outputSchema = {
2986
- status: import_schema3.z.enum(["ok", "error"]).describe("Operation status"),
2987
- classId: import_schema3.z.string().optional().describe("Class ID (returned on create success)"),
2988
- message: import_schema3.z.string().optional().describe("Error details if status is error")
2989
- };
2990
- var handler = async (input) => {
2991
- const { action, classId: rawClassId, globalClassName, style: rawStyle, breakpoint } = input;
2992
- let classId = rawClassId;
2993
- if (action === "create" && !globalClassName) {
2994
- return {
2995
- status: "error",
2996
- message: "Create requires globalClassName"
2997
- };
2998
- }
2999
- if (action === "modify" && !classId) {
3000
- return {
3001
- status: "error",
3002
- message: "Modify requires classId"
3003
- };
3004
- }
3005
- if (action === "delete" && !classId) {
3006
- return {
3007
- status: "error",
3008
- message: "Delete requires classId"
3009
- };
3010
- }
3011
- const { create, update, delete: deleteClass2 } = globalClassesStylesProvider.actions;
3012
- if (!create || !update || !deleteClass2) {
3013
- return {
3014
- status: "error",
3015
- message: "Required actions not available"
3016
- };
3017
- }
3018
- const styleBlocks = collectNonEmptyStyleBlocks(rawStyle);
3019
- if (action !== "delete" && Object.keys(styleBlocks).length === 0) {
3020
- throw new Error(
3021
- 'Style must not be empty. Provide plaintext CSS per state.\n\nExample: style.default = "display: flex; flex-direction: column; gap: 1rem;"'
3022
- );
3023
- }
3024
- let convertedByState = {};
3025
- if (action !== "delete") {
3026
- const conversionResults = await (0, import_editor_canvas2.convertStyleBlocksToAtomic)(styleBlocks);
3027
- convertedByState = Object.fromEntries(
3028
- Object.entries(conversionResults).map(([state, { props, customCss }]) => [
3029
- state,
3030
- { props, customCss: toStoredCustomCss(customCss) }
3031
- ])
3032
- );
3033
- }
3034
- const breakpointValue = breakpoint ?? "desktop";
3035
- let result = {
3036
- status: "error",
3037
- classId: "",
3038
- message: "unknown error"
3039
- };
3040
- try {
3041
- if (action === "delete") {
3042
- const deleted = await attemptDelete({
3043
- classId,
3044
- stylesProvider: globalClassesStylesProvider
3045
- });
3046
- if (deleted) {
3047
- return { status: "ok", message: `deleted global class with ID ${classId}` };
3048
- }
3049
- throw new Error("error deleting class");
3050
- }
3051
- let currentAction = action;
3052
- for await (const [state, { props, customCss }] of Object.entries(convertedByState)) {
3053
- switch (currentAction) {
3054
- case "create":
3055
- const newClassId = await attemptCreate({
3056
- props,
3057
- customCss,
3058
- className: globalClassName,
3059
- stylesProvider: globalClassesStylesProvider,
3060
- breakpoint: breakpointValue,
3061
- state
3062
- });
3063
- if (newClassId && currentAction === "create") {
3064
- currentAction = "modify";
3065
- classId = newClassId;
3066
- result = {
3067
- status: "ok",
3068
- message: `created global class with ID ${newClassId}`
3069
- };
3070
- globalClassesStylesProvider.actions.tracking?.({
3071
- event: "classCreated",
3072
- executedBy: "mcp_tool",
3073
- classId: newClassId
3074
- });
3075
- (0, import_editor_mcp2.dispatchMcpStylesAppliedEvent)({ styleValue: props });
3076
- } else {
3077
- throw new Error("error creating class");
3078
- }
3079
- break;
3080
- case "modify":
3081
- const updated = await attemptUpdate({
3082
- classId,
3083
- props,
3084
- customCss,
3085
- stylesProvider: globalClassesStylesProvider,
3086
- breakpoint: breakpointValue,
3087
- state
3088
- });
3089
- if (updated) {
3090
- result = { status: "ok", classId };
3091
- (0, import_editor_mcp2.dispatchMcpStylesAppliedEvent)({ styleValue: props });
3092
- } else {
3093
- throw new Error("error modifying class");
3094
- }
3095
- break;
3096
- default:
3097
- throw new Error(`Unsupported action ${action}`);
3098
- }
3099
- }
3100
- } catch (error) {
3101
- return {
3102
- status: "error",
3103
- message: `${action} failed: ${error.message || "Unknown error"}`
3104
- };
3105
- }
3106
- return result;
3107
- };
3108
- var initManageGlobalClasses = (reg) => {
3109
- const { addTool } = reg;
3110
- addTool({
3111
- name: "manage-global-classes",
3112
- requiredResources: [
3113
- { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
3114
- { uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_FULL_URI, description: "Breakpoints list" }
3115
- ],
3116
- 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.
3117
-
3118
- IMPORTANT: style must contain plaintext CSS rules per state \u2014 never pass empty strings.
3119
- CSS is converted server-side in one bulk request; any declaration that cannot be converted is stored as the class custom CSS.
3120
-
3121
- Example \u2014 creating a flex column class:
3122
- style.default = "display: flex; flex-direction: column; gap: 1rem;"
3123
-
3124
- Example \u2014 hover state:
3125
- style.hover = "opacity: 0.85;"`,
3126
- schema,
3127
- outputSchema,
3128
- handler
3129
- });
3130
- };
3131
- async function attemptCreate(opts) {
3132
- const { props, customCss, breakpoint, className, stylesProvider, state } = opts;
3133
- const { create, delete: deleteClass2 } = stylesProvider.actions;
3134
- if (!className) {
3135
- throw new Error("Global class name is a required for creation");
3136
- }
3137
- if (!create || !deleteClass2) {
3138
- throw new Error("User is unable to create global classes");
3139
- }
3140
- const newClassId = create(className, [
3141
- {
3142
- meta: {
3143
- breakpoint,
3144
- state: state === "default" ? null : state
3145
- },
3146
- custom_css: customCss,
3147
- props
3148
- }
3149
- ]);
3150
- try {
3151
- await saveGlobalClasses2({ context: "frontend" });
3152
- return newClassId;
3153
- } catch {
3154
- deleteClass2(newClassId);
3155
- throw new Error("error creating class");
3156
- }
3157
- }
3158
- async function attemptUpdate(opts) {
3159
- const { props, customCss, breakpoint, classId, stylesProvider, state } = opts;
3160
- const { updateProps, update } = stylesProvider.actions;
3161
- if (!classId) {
3162
- throw new Error("Class ID is required for modification");
3163
- }
3164
- if (!updateProps || !update) {
3165
- throw new Error("User is unable to update global classes");
3166
- }
3167
- await loadExistingClasses([classId]);
3168
- const snapshot = structuredClone(stylesProvider.actions.all());
3169
- try {
3170
- updateProps({
3171
- id: classId,
3172
- props,
3173
- custom_css: customCss,
3174
- meta: {
3175
- breakpoint,
3176
- state: state === "default" ? null : state
3177
- }
3178
- });
3179
- await saveGlobalClasses2({ context: "frontend" });
3180
- return true;
3181
- } catch {
3182
- snapshot.forEach((style) => {
3183
- update({
3184
- id: style.id,
3185
- variants: style.variants
3186
- });
3187
- });
3188
- await saveGlobalClasses2({ context: "frontend" });
3189
- throw new Error("error updating class");
3190
- }
3191
- }
3192
- async function attemptDelete(opts) {
3193
- const { classId, stylesProvider } = opts;
3194
- const { delete: deleteClass2, create } = stylesProvider.actions;
3195
- if (!classId) {
3196
- throw new Error("Class ID is required for deletion");
3197
- }
3198
- if (!deleteClass2 || !create) {
3199
- throw new Error("User is unable to delete global classes");
3200
- }
3201
- const snapshot = structuredClone(stylesProvider.actions.all());
3202
- const targetClass = snapshot.find((style) => style.id === classId);
3203
- if (!targetClass) {
3204
- throw new Error(`Class with ID "${classId}" not found`);
3205
- }
3206
- deleteClass2(classId);
3207
- await saveGlobalClasses2({ context: "frontend" });
3208
- return true;
3209
- }
3210
- function collectNonEmptyStyleBlocks(style) {
3211
- const blocks = {};
3212
- Object.entries(style).forEach(([state, cssText]) => {
3213
- if (cssText?.trim()) {
3214
- blocks[state] = cssText.trim();
3215
- }
3216
- });
3217
- return blocks;
3218
- }
3219
- function toStoredCustomCss(customCss) {
3220
- if (!customCss?.trim()) {
3221
- return null;
3222
- }
3223
- return { raw: btoa(customCss) };
3224
- }
3225
-
3226
3041
  // src/mcp-integration/index.ts
3227
3042
  var initMcpIntegration = (reg, canvasMcpEntry) => {
3228
3043
  initMcpApplyUnapplyGlobalClasses(reg);
3229
3044
  initMcpApplyGetGlobalClassUsages(reg);
3230
- initManageGlobalClasses(reg);
3045
+ initManageClassesTool(reg);
3231
3046
  initClassesResource(reg, canvasMcpEntry);
3232
3047
  };
3233
3048
 
3234
3049
  // src/sync-with-document.tsx
3235
3050
  var import_react13 = require("react");
3236
- var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
3051
+ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
3237
3052
 
3238
3053
  // src/sync-with-document-save.ts
3239
3054
  var import_editor_current_user3 = require("@elementor/editor-current-user");
3240
3055
  var import_editor_documents5 = require("@elementor/editor-documents");
3241
- var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
3242
- var import_store30 = require("@elementor/store");
3056
+ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
3057
+ var import_store32 = require("@elementor/store");
3243
3058
  var pendingSave = null;
3244
3059
  function syncWithDocumentSave(panelActions) {
3245
3060
  const unsubscribe = syncDirtyState();
@@ -3248,7 +3063,7 @@ function syncWithDocumentSave(panelActions) {
3248
3063
  return unsubscribe;
3249
3064
  }
3250
3065
  function syncDirtyState() {
3251
- return (0, import_store30.__subscribeWithSelector)(selectIsDirty, () => {
3066
+ return (0, import_store32.__subscribeWithSelector)(selectIsDirty, () => {
3252
3067
  if (!isDirty()) {
3253
3068
  return;
3254
3069
  }
@@ -3275,7 +3090,7 @@ function triggerSave(panelActions, context2 = "preview") {
3275
3090
  return promise;
3276
3091
  }
3277
3092
  function bindSaveAction(panelActions) {
3278
- (0, import_editor_v1_adapters3.registerDataHook)("dependency", "document/save/save", (args) => {
3093
+ (0, import_editor_v1_adapters2.registerDataHook)("dependency", "document/save/save", (args) => {
3279
3094
  triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
3280
3095
  return true;
3281
3096
  });
@@ -3291,13 +3106,13 @@ function bindBeforeSaveTemplateAction() {
3291
3106
  }));
3292
3107
  }
3293
3108
  function isDirty() {
3294
- return selectIsDirty((0, import_store30.__getState)());
3109
+ return selectIsDirty((0, import_store32.__getState)());
3295
3110
  }
3296
3111
 
3297
3112
  // src/sync-with-document.tsx
3298
3113
  function SyncWithDocumentSave() {
3299
3114
  (0, import_react13.useEffect)(() => {
3300
- const unsubscribe = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
3115
+ const unsubscribe = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), () => {
3301
3116
  const open = () => {
3302
3117
  window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
3303
3118
  };
@@ -3310,7 +3125,7 @@ function SyncWithDocumentSave() {
3310
3125
 
3311
3126
  // src/init.ts
3312
3127
  function init() {
3313
- (0, import_store32.__registerSlice)(slice);
3128
+ (0, import_store34.__registerSlice)(slice);
3314
3129
  import_editor_embedded_documents_manager.embeddedDocumentsManager.onDocumentLoad((documentId) => {
3315
3130
  void addDocumentClasses(documentId);
3316
3131
  });
@@ -3344,7 +3159,7 @@ function init() {
3344
3159
  getThemeColor: (theme) => theme.palette.global.dark
3345
3160
  });
3346
3161
  initMcpIntegration(
3347
- (0, import_editor_mcp3.getMCPByDomain)("classes", {
3162
+ (0, import_editor_mcp2.getMCPByDomain)("classes", {
3348
3163
  instructions: "MCP server for management of Elementor global classes",
3349
3164
  docs: `Everything related to V4 ( Atomic ) global classes.
3350
3165
  # Global classes
@@ -3353,7 +3168,7 @@ function init() {
3353
3168
  - Get details of a global class
3354
3169
  `
3355
3170
  }),
3356
- (0, import_editor_mcp3.getMCPByDomain)("canvas")
3171
+ (0, import_editor_mcp2.getMCPByDomain)("canvas")
3357
3172
  );
3358
3173
  }
3359
3174
  // Annotate the CommonJS export names for ESM import in node: