@elementor/editor-variables 3.35.0-340 → 3.35.0-342

package/dist/index.d.mts

@@ -6,6 +6,18 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
+declare function registerVariableTypes(): void;
+
+type TVariable = {
+    type: string;
+    label: string;
+    value: string;
+    order?: number;
+    deleted?: boolean;
+    deleted_at?: string;
+};
+type TVariablesList = Record<string, TVariable>;
+
 type Variable = {
     key?: string;
     label: string;
@@ -21,6 +33,36 @@ type NormalizedVariable = {
     order?: number;
 };
 
+declare const service: {
+    variables: () => TVariablesList;
+    findIdByLabel(needle: string): string;
+    findVariableByLabel(needle: string): TVariable | null;
+    getWatermark: () => number;
+    init: () => Promise<any>;
+    load: () => Promise<any>;
+    create: ({ type, label, value }: Variable) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    update: (id: string, { label, value }: Omit<Variable, "type">) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    delete: (id: string) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    restore: (id: string, label?: string, value?: string) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    batchSave: (originalVariables: TVariablesList, currentVariables: TVariablesList) => Promise<{
+        success: boolean;
+        watermark: any;
+        operations: number;
+    }>;
+};
+
 type ValueFieldProps = {
     value: string;
     onChange: (value: string) => void;
@@ -51,6 +93,23 @@ declare const registerVariableType: ({ key, icon, startIcon, valueField, propTyp
     isCompatible?: (propType: _elementor_editor_props.PropType, variable: Variable) => boolean;
 }) => void;
 
-declare function registerVariableTypes(): void;
+declare const GLOBAL_VARIABLES_URI = "elementor://global-variables";
+
+declare const Utils: {
+    readonly globalVariablesLLMResolvers: {
+        'global-color-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+        'global-font-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+        'global-size-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+    };
+};
 
-export { init, registerVariableType, registerVariableTypes };
+export { GLOBAL_VARIABLES_URI, Utils, init, registerVariableType, registerVariableTypes, service };

package/dist/index.d.ts

@@ -6,6 +6,18 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
+declare function registerVariableTypes(): void;
+
+type TVariable = {
+    type: string;
+    label: string;
+    value: string;
+    order?: number;
+    deleted?: boolean;
+    deleted_at?: string;
+};
+type TVariablesList = Record<string, TVariable>;
+
 type Variable = {
     key?: string;
     label: string;
@@ -21,6 +33,36 @@ type NormalizedVariable = {
     order?: number;
 };
 
+declare const service: {
+    variables: () => TVariablesList;
+    findIdByLabel(needle: string): string;
+    findVariableByLabel(needle: string): TVariable | null;
+    getWatermark: () => number;
+    init: () => Promise<any>;
+    load: () => Promise<any>;
+    create: ({ type, label, value }: Variable) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    update: (id: string, { label, value }: Omit<Variable, "type">) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    delete: (id: string) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    restore: (id: string, label?: string, value?: string) => Promise<{
+        id: any;
+        variable: any;
+    }>;
+    batchSave: (originalVariables: TVariablesList, currentVariables: TVariablesList) => Promise<{
+        success: boolean;
+        watermark: any;
+        operations: number;
+    }>;
+};
+
 type ValueFieldProps = {
     value: string;
     onChange: (value: string) => void;
@@ -51,6 +93,23 @@ declare const registerVariableType: ({ key, icon, startIcon, valueField, propTyp
     isCompatible?: (propType: _elementor_editor_props.PropType, variable: Variable) => boolean;
 }) => void;
 
-declare function registerVariableTypes(): void;
+declare const GLOBAL_VARIABLES_URI = "elementor://global-variables";
+
+declare const Utils: {
+    readonly globalVariablesLLMResolvers: {
+        'global-color-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+        'global-font-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+        'global-size-variable': (value: unknown) => {
+            $$type: string;
+            value: string;
+        };
+    };
+};
 
-export { init, registerVariableType, registerVariableTypes };
+export { GLOBAL_VARIABLES_URI, Utils, init, registerVariableType, registerVariableTypes, service };

package/dist/index.js

@@ -30,9 +30,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  GLOBAL_VARIABLES_URI: () => GLOBAL_VARIABLES_URI,
+  Utils: () => Utils,
   init: () => init,
   registerVariableType: () => registerVariableType,
-  registerVariableTypes: () => registerVariableTypes
+  registerVariableTypes: () => registerVariableTypes,
+  service: () => service
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -455,6 +458,16 @@ var service = {
   variables: () => {
     return storage.load();
   },
+  findIdByLabel(needle) {
+    const variableId = Object.entries(this.variables()).find(([, variable]) => variable.label === needle);
+    if (!variableId) {
+      throw new Error(`Variable with label ${needle} not found`);
+    }
+    return variableId[0];
+  },
+  findVariableByLabel(needle) {
+    return Object.values(this.variables()).find((variable) => variable.label === needle) || null;
+  },
   getWatermark: () => {
     return storage.state.watermark;
   },
@@ -623,10 +636,11 @@ var resolveCssVariable = (id2, variable) => {
   if (!name.trim()) {
     return null;
   }
+  const validCssVariableName = `--${name}`;
   if (!fallbackValue.trim()) {
-    return `var(--${name})`;
+    return `var(${validCssVariableName})`;
   }
-  return `var(--${name}, ${fallbackValue})`;
+  return `var(${validCssVariableName}, ${fallbackValue})`;
 };
 
 // src/transformers/inheritance-transformer.tsx
@@ -643,12 +657,14 @@ var inheritanceTransformer = (0, import_editor_canvas.createTransformer)((id2) =
 
 // src/transformers/variable-transformer.ts
 var import_editor_canvas2 = require("@elementor/editor-canvas");
-var variableTransformer = (0, import_editor_canvas2.createTransformer)((id2) => {
+var variableTransformer = (0, import_editor_canvas2.createTransformer)((idOrLabel) => {
   const variables = service.variables();
-  if (!variables[id2]) {
+  const targetVariable = variables[idOrLabel] || service.findVariableByLabel(idOrLabel);
+  if (!targetVariable) {
     return null;
   }
-  return resolveCssVariable(id2, variables[id2]);
+  const id2 = service.findIdByLabel(targetVariable.label);
+  return resolveCssVariable(id2, targetVariable);
 });
 
 // src/variables-registry/create-variable-type-registry.ts
@@ -3284,9 +3300,6 @@ var trackOpenVariablePopover = (path, variableType) => {
   });
 };
 
-// src/mcp/index.ts
-var import_editor_mcp6 = require("@elementor/editor-mcp");
-
 // src/mcp/create-variable-tool.ts
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_schema3 = require("@elementor/schema");
@@ -3300,7 +3313,7 @@ var OutputSchema = {
   message: import_schema3.z.string().optional().describe("Optional message providing additional information about the operation")
 };
 var initCreateVariableTool = () => {
-  (0, import_editor_mcp.getMCPByDomain)("variables").addTool({
+  (0, import_editor_mcp.getMCPByDomain)("canvas").addTool({
     name: "create-global-variable",
     schema: InputSchema,
     outputSchema: OutputSchema,
@@ -3356,7 +3369,7 @@ In that case, inform the user the type is unsupported and they should try anothe
 var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_schema4 = require("@elementor/schema");
 var initDeleteVariableTool = () => {
-  (0, import_editor_mcp2.getMCPByDomain)("variables").addTool({
+  (0, import_editor_mcp2.getMCPByDomain)("canvas").addTool({
     name: "delete-global-variable",
     schema: {
       id: import_schema4.z.string().describe("The unique identifier of the variable to be deleted.")
@@ -3400,76 +3413,23 @@ When a variable is deleted, all references to it in all pages accross the websit
   });
 };
 
-// src/mcp/list-variables-tool.ts
+// src/mcp/update-variable-tool.ts
 var import_editor_mcp3 = require("@elementor/editor-mcp");
 var import_schema5 = require("@elementor/schema");
-var VariableSchema = {
-  type: import_schema5.z.string().describe("The type of the variable."),
-  label: import_schema5.z.string().describe("The label of the variable, displayed to the user"),
-  value: import_schema5.z.string().describe("The value of the variable."),
-  id: import_schema5.z.string().describe(
-    "The unique identifier of the variable. Used for internal reference, not to be exposed to end users"
-  )
-};
-var VariableListSchema = {
-  variables: import_schema5.z.array(import_schema5.z.object(VariableSchema)).describe("List of variables")
-};
-var initListVariablesTool = () => {
-  (0, import_editor_mcp3.getMCPByDomain)("variables").addTool({
-    name: "list-global-variables",
-    description: `List editor global variables
-  
-  ## When to use this tool:
-  - When a user requests to see all available global variables in the Elementor editor.
-  - When you need to be exact on a variable label, to avoid any mistakes.
-  - When you want to see the most up-to-date list of global variables.
-  - Before using any other variables related tools that makes changes, such as deletion, creation, or updates. This ensures you have the latest information and there is no naming collision or mismatching.
-  
-  ## Example tool response (JSON format):
-  \`\`\`json
-  { variables: [
-   { type: 'global-color-variable', label: 'Cool', value: 'rgb(1,2,3)', id: 'some-unique-id' },
-   { type: 'global-font-variable', label: 'Headline', value: 'serif', id: 'some-other-unique-id' },
-  ] }
-  \`\`\`
-  
-  Once you get the response, please display the variables in a user-friendly way, unless explicitly requested otherwise.
-  Unless explicitly requested otherwise, response in HTML Format, prefer to use tables or unordered lists.
-  
-  Note: **The label is most improtant to be seen as-is without any changes.**
-  
-  <important>
-  **Do not omit the label**. This is important for the user to identify the variable.
-  **Do not change the label**, it must be displayed exactly as it is, in it's original characters as received from this tool.
-  </important>
-  `,
-    outputSchema: VariableListSchema,
-    handler: async () => {
-      const variables = service.variables();
-      return {
-        variables: Object.entries(variables).map(([id2, varData]) => ({ id: id2, ...varData }))
-      };
-    }
-  });
-};
-
-// src/mcp/update-variable-tool.ts
-var import_editor_mcp4 = require("@elementor/editor-mcp");
-var import_schema6 = require("@elementor/schema");
 var initUpdateVariableTool = () => {
-  (0, import_editor_mcp4.getMCPByDomain)("variables").addTool({
+  (0, import_editor_mcp3.getMCPByDomain)("canvas").addTool({
     schema: {
-      id: import_schema6.z.string().describe("The unique identifier of the variable to be updated or renamed."),
-      label: import_schema6.z.string().describe(
+      id: import_schema5.z.string().describe("The unique identifier of the variable to be updated or renamed."),
+      label: import_schema5.z.string().describe(
         "The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label."
       ),
-      value: import_schema6.z.string().describe(
+      value: import_schema5.z.string().describe(
         "The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value."
       )
     },
     outputSchema: {
-      status: import_schema6.z.enum(["ok", "error"]).describe("The status of the operation"),
-      message: import_schema6.z.string().optional().describe("Optional message providing additional information about the operation")
+      status: import_schema5.z.enum(["ok", "error"]).describe("The status of the operation"),
+      message: import_schema5.z.string().optional().describe("Optional message providing additional information about the operation")
     },
     name: "update-global-variable",
     description: `Update an existing global variable
@@ -3527,19 +3487,25 @@ Failed update, which must be displayed to the end user. If the error message is
 };
 
 // src/mcp/variables-resource.ts
-var import_editor_mcp5 = require("@elementor/editor-mcp");
-var GLOBAL_VARIABLES_URI = "elementor://variables";
+var import_editor_mcp4 = require("@elementor/editor-mcp");
+var GLOBAL_VARIABLES_URI = "elementor://global-variables";
 var initVariablesResource = () => {
-  const { mcpServer } = (0, import_editor_mcp5.getMCPByDomain)("variables");
+  const { mcpServer } = (0, import_editor_mcp4.getMCPByDomain)("canvas");
   mcpServer.resource(
     "global-variables",
     GLOBAL_VARIABLES_URI,
     {
-      description: "Global variables list. Variables are being used in this way: If it is directly in the schema, you need to put the ID which is the key inside the object."
+      description: "List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)"
     },
     async () => {
+      const variables = {};
+      Object.entries(service.variables()).forEach(([id2, variable]) => {
+        if (!variable.deleted) {
+          variables[id2] = variable;
+        }
+      });
       return {
-        contents: [{ uri: GLOBAL_VARIABLES_URI, text: localStorage["elementor-global-variables"] }]
+        contents: [{ uri: GLOBAL_VARIABLES_URI, text: JSON.stringify(variables) }]
       };
     }
   );
@@ -3553,9 +3519,6 @@ var initVariablesResource = () => {
 
 // src/mcp/index.ts
 function initMcp() {
-  const { setMCPDescription } = (0, import_editor_mcp6.getMCPByDomain)("variables");
-  setMCPDescription(`Elementor Editor Variables MCP`);
-  initListVariablesTool();
   initCreateVariableTool();
   initUpdateVariableTool();
   initDeleteVariableTool();
@@ -3831,10 +3794,43 @@ function hasVariable(value) {
   }
   return false;
 }
+
+// src/utils/llm-propvalue-label-resolver.ts
+var globalVariablesLLMResolvers = {
+  "global-color-variable": (value) => {
+    const idOrLabel = String(value);
+    return {
+      $$type: "global-color-variable",
+      value: service.variables()[idOrLabel] ? idOrLabel : service.findIdByLabel(idOrLabel)
+    };
+  },
+  "global-font-variable": (value) => {
+    const idOrLabel = String(value);
+    return {
+      $$type: "global-font-variable",
+      value: service.variables()[idOrLabel] ? idOrLabel : service.findIdByLabel(idOrLabel)
+    };
+  },
+  "global-size-variable": (value) => {
+    const idOrLabel = String(value);
+    return {
+      $$type: "global-size-variable",
+      value: service.variables()[idOrLabel] ? idOrLabel : service.findIdByLabel(idOrLabel)
+    };
+  }
+};
+
+// src/index.ts
+var Utils = {
+  globalVariablesLLMResolvers
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GLOBAL_VARIABLES_URI,
+  Utils,
   init,
   registerVariableType,
-  registerVariableTypes
+  registerVariableTypes,
+  service
 });
 //# sourceMappingURL=index.js.map