@elementor/editor-variables 4.2.0-841 → 4.2.0-843

package/dist/index.js

@@ -334,12 +334,13 @@ var buildOperationsArray = (originalVariables, currentVariables, deletedVariable
 // src/storage.ts
 var STORAGE_KEY = "elementor-global-variables";
 var STORAGE_WATERMARK_KEY = "elementor-global-variables-watermark";
+var STORAGE_UPDATED_EVENT = "variables:updated";
 var OP_RW = "RW";
 var OP_RO = "RO";
 var Storage = class {
   state;
   notifyChange() {
-    window.dispatchEvent(new Event("variables:updated"));
+    window.dispatchEvent(new Event(STORAGE_UPDATED_EVENT));
   }
   constructor() {
     this.state = {
@@ -1059,6 +1060,17 @@ var useVariablesManagerState = () => {
   const [isDirty, setIsDirty] = (0, import_react5.useState)(false);
   const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
   const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  (0, import_react5.useEffect)(() => {
+    const handleStorageUpdated = () => {
+      setVariables(getVariables(false));
+      setDeletedVariables([]);
+      setIsDirty(false);
+    };
+    window.addEventListener(STORAGE_UPDATED_EVENT, handleStorageUpdated);
+    return () => {
+      window.removeEventListener(STORAGE_UPDATED_EVENT, handleStorageUpdated);
+    };
+  }, []);
   const handleOnChange = (0, import_react5.useCallback)(
     (newVariables) => {
       setVariables({ ...variables, ...newVariables });
@@ -2412,14 +2424,7 @@ var import_react14 = require("react");
 var import_editor_canvas4 = require("@elementor/editor-canvas");
 function GlobalStylesImportListener() {
   (0, import_react14.useEffect)(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedVars = event.detail?.global_variables;
-      if (!importedVars) {
-        return;
-      }
-      if (importedVars.data && typeof importedVars.data === "object") {
-        styleVariablesRepository.update(importedVars.data);
-      }
+    const handleGlobalStylesImported = () => {
       service.load();
     };
     window.addEventListener(import_editor_canvas4.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
@@ -3956,7 +3961,7 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
         };
       }
     );
-    window.addEventListener("variables:updated", notifyGlobalVariablesUpdated);
+    window.addEventListener(STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
     (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandEndEvent)("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
@@ -3971,7 +3976,9 @@ var initManageVariableTool = (reg) => {
       id: import_schema3.z.string().optional().describe("Variable id (required for update/delete). Get from list-global-variables."),
       type: import_schema3.z.string().optional().describe('Variable type: "global-color-variable" or "global-font-variable" (required for create)'),
       label: import_schema3.z.string().optional().describe("Variable label (required for create/update)"),
-      value: import_schema3.z.string().optional().describe("Variable value (required for create/update)")
+      value: import_schema3.z.string().optional().describe(
+        "The variable value (required for create/update). Provide a plain CSS value matching the variable type (font: family name; color: CSS color; size: value with unit). Never JSON."
+      )
     },
     outputSchema: {
       status: import_schema3.z.enum(["ok"]).describe("Operation status"),
@@ -3987,14 +3994,11 @@ var initManageVariableTool = (reg) => {
         description: "Global variables"
       }
     ],
-    description: `Manages global variables (create/update/delete). Existing variables available in resources.
-CREATE: requires type, label, value. Ensure label is unique.
-UPDATE: requires id, label, value. When renaming: keep existing value. When updating value: keep exact label.
-DELETE: requires id. DESTRUCTIVE - confirm with user first.
-
-# NAMING - IMPORTANT
-the variables names should ALWAYS be lowercased and dashed spaced. example: "Headline Primary" should be "headline-primary"
-`,
+    description: `Create, update, or delete V4 global variables (distinct from legacy "globals").
+- Values: any valid CSS value, inserted as-is (1:1 with \`--css-var: VALUE\`). Do NOT pass JSON or legacy-globals object structures.
+- Names: lowercase, dash-separated (e.g. "Headline Primary" \u2192 "headline-primary").
+- Update: when renaming, keep the existing value; when updating value, keep the exact label.
+- Delete: destructive \u2014 confirm with user first.`,
     handler: async (params) => {
       const operations = getServiceActions(service);
       const op = operations[params.action];
@@ -4043,15 +4047,6 @@ function getServiceActions(svc) {
 
 // src/mcp/index.ts
 function initMcp(reg, canvasMcpEntry) {
-  const { setMCPDescription } = reg;
-  setMCPDescription(
-    `Everything related to V4 ( Atomic ) variables.
-# Global variables
-- Create/update/delete global variables
-- Get list of global variables
-- Get details of a global variable
-`
-  );
   initManageVariableTool(reg);
   initVariablesResource(reg, canvasMcpEntry);
 }
@@ -4563,7 +4558,15 @@ function init() {
     useProps: usePropVariableAction
   });
   service.init().then(() => {
-    initMcp((0, import_editor_mcp.getMCPByDomain)("variables"), (0, import_editor_mcp.getMCPByDomain)("canvas"));
+    const variablesMcpRegistry = (0, import_editor_mcp.getMCPByDomain)("variables", {
+      instructions: `Everything related to V4 ( Atomic ) variables.
+# Global variables
+- Create/update/delete global variables
+- Get list of global variables
+- Get details of a global variable
+`
+    });
+    initMcp(variablesMcpRegistry, (0, import_editor_mcp.getMCPByDomain)("canvas"));
   });
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",