@elementor/editor-variables 4.3.0-976 → 4.3.0-978

package/dist/index.mjs

@@ -3863,110 +3863,23 @@ var trackOpenVariablePopover = (path, variableType) => {
 };
 
 // src/mcp/manage-variable-tool.ts
+import { httpService as httpService3 } from "@elementor/http-client";
 import { z as z3 } from "@elementor/schema";
-import { isProActive as isProActive2 } from "@elementor/utils";
-
-// src/sync/get-font-configs.ts
-var getFontConfigs = () => {
-  return window.elementor?.config?.controls?.font?.options ?? {};
-};
+import { isProActive } from "@elementor/utils";
 
 // src/mcp/variable-tool-prompt.ts
-import { toolPrompts } from "@elementor/editor-mcp";
-import { isProActive } from "@elementor/utils";
 var MANAGE_VARIABLES_GUIDE_URI = "elementor://variables/tools/manage-global-variable-guide";
-var generateVariablesPrompt = () => {
-  const prompt = toolPrompts("manage-global-variable");
-  const proIsActive = isProActive();
-  const sizeVariableSection = proIsActive ? `- **global-size-variable** \u2014 A simple CSS length with a unit (Elementor Pro). Use this for fixed spacing, font sizes, or layout values. Example: \`16px\`, \`1.5rem\`, \`2em\`, \`10vh\`
-- **global-custom-size-variable** \u2014 Any CSS size expression that goes beyond a simple number + unit (Elementor Pro). Use this when the value is a CSS function, a keyword, or a combination of units that \`global-size-variable\` cannot represent. Example: \`auto\`, \`clamp(1rem, 2vw, 2rem)\`, \`calc(100% - 32px)\`, \`min(50vw, 600px)\`, \`300ms\`, \`2ch\`. When in doubt: if the value contains a function call or a keyword, use \`global-custom-size-variable\`.` : `- ~~global-size-variable~~ \u2014 requires Elementor Pro (not available on this site)
-- ~~global-custom-size-variable~~ \u2014 requires Elementor Pro (not available on this site)`;
-  prompt.description(`
-# Purpose
-Create, update, or delete V4 global CSS variables. These are distinct from legacy v3 globals and map 1:1 to \`--css-var: VALUE\`.
-
-# Available Types
-- **global-color-variable** \u2014 CSS color value. Example: \`#FF0000\`, \`rgba(255,0,0,1)\`, \`hsl(0,100%,50%)\`
-- **global-font-variable** \u2014 Font family name ONLY \u2014 NOT a size or px value. Example: \`Roboto\`, \`Open Sans\`. NEVER pass px/rem here.
-${sizeVariableSection}
-
-# Naming Rules
-- Labels must be **lowercase**, using only letters (a-z), numbers, digits (0-9), dashes (-), or underscores (_)
-- No spaces, no special characters
-- Example: "Headline Primary" \u2192 \`headline-primary\`
-- Labels must be unique \u2014 always check [elementor://global-variables] first
-
-# Value Rules
-- Provide a **plain CSS value** only \u2014 do NOT pass JSON, legacy-globals object structures, or variable references
-- Values are inserted as-is: \`--css-var: <value>\`
-- NEVER store a px/rem value inside a \`global-font-variable\` \u2014 use \`global-size-variable\` (Pro) instead
-
-# Operations
-- **create** \u2014 requires \`type\`, \`label\`, \`value\`. Label must be unique.
-- **update** \u2014 requires \`id\`, \`label\`, \`value\`. Get \`id\` from [elementor://global-variables]. When renaming: keep existing value. When changing value: keep exact existing label.
-- **delete** \u2014 requires \`id\`. DESTRUCTIVE \u2014 always confirm with user before executing.
-`);
-  prompt.parameter("action", '"create", "update", or "delete".');
-  prompt.parameter("type", "Variable type. Required for create. See Available Types above.");
-  prompt.parameter("label", "Variable name (lowercase, dash-separated). Required for create/update.");
-  prompt.parameter(
-    "value",
-    "Plain CSS value matching the variable type. Required for create/update. Do NOT pass JSON."
-  );
-  prompt.parameter("id", "Variable ID. Required for update/delete. Obtain from [elementor://global-variables].");
-  prompt.example(`
-Create a brand color:
-{ "action": "create", "type": "global-color-variable", "label": "brand-primary", "value": "#1A73E8" }
-
-Create a heading font:
-{ "action": "create", "type": "global-font-variable", "label": "font-heading", "value": "Playfair Display" }
-
-Create a simple spacing size:
-{ "action": "create", "type": "global-size-variable", "label": "spacing-md", "value": "16px" }
-
-Create a fluid/responsive size using a CSS function (use global-custom-size-variable, NOT global-size-variable):
-{ "action": "create", "type": "global-custom-size-variable", "label": "spacing-fluid", "value": "clamp(1rem, 2vw, 2rem)" }
-
-Create a size that is a keyword:
-{ "action": "create", "type": "global-custom-size-variable", "label": "width-auto", "value": "auto" }
-
-Create a size using calc():
-{ "action": "create", "type": "global-custom-size-variable", "label": "sidebar-width", "value": "calc(100% - 32px)" }
-
-Update a variable's value (keep exact label):
-{ "action": "update", "id": "abc123", "label": "brand-primary", "value": "#0D47A1" }
-
-Rename a variable (keep existing value):
-{ "action": "update", "id": "abc123", "label": "brand-secondary", "value": "#1A73E8" }
-
-Delete a variable:
-{ "action": "delete", "id": "abc123" }
-`);
-  prompt.instruction(
-    "Always read [elementor://global-variables] before creating to check existing variables and avoid duplicate labels."
-  );
-  return prompt.prompt();
-};
 
 // src/mcp/variables-resource.ts
 import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+import { httpService as httpService2 } from "@elementor/http-client";
+var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
-var buildGlobalVariablesPayload = async () => {
-  const merged = {};
-  Object.entries(service.variables()).forEach(([id, variable]) => {
-    if (!variable.deleted) {
-      merged[id] = { ...variable, version: "v4" };
-    }
-  });
-  return merged;
-};
 var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
   [canvasMcpEntry, variablesMcpEntry].forEach((entry) => {
     const { resource, sendResourceUpdated } = entry;
     const notifyGlobalVariablesUpdated = () => {
-      sendResourceUpdated({
-        uri: GLOBAL_VARIABLES_URI
-      });
+      sendResourceUpdated({ uri: GLOBAL_VARIABLES_URI });
     };
     resource(
       "global-variables",
@@ -3974,11 +3887,17 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
       {
         description: "Global variables available (v4)"
       },
-      async () => {
-        const variables = await buildGlobalVariablesPayload();
+      async (uri) => {
+        const { data } = await httpService2().get(MCP_PROXY_URL, {
+          params: { uri: uri.href }
+        });
         return {
           contents: [
-            { uri: GLOBAL_VARIABLES_URI, mimeType: "application/json", text: JSON.stringify(variables) }
+            {
+              uri: uri.href,
+              mimeType: "application/json",
+              text: JSON.stringify(data.data ?? {})
+            }
           ]
         };
       }
@@ -3989,37 +3908,17 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
 };
 
 // src/mcp/manage-variable-tool.ts
+var MCP_PROXY_URL2 = "elementor/v1/mcp-proxy";
+var TOOL_NAME = "manage-global-variable";
 var VARIABLE_TYPES = {
   COLOR: "global-color-variable",
   FONT: "global-font-variable",
   SIZE: "global-size-variable",
   CUSTOM_SIZE: "global-custom-size-variable"
 };
-var LENGTH_UNIT_PATTERN = /^(auto|\d+(\.\d+)?(px|rem|em|vh|vw|%|ch|s|ms))$/i;
-var COLOR_PATTERN = /^(#[0-9a-f]{3,8}|rgba?\(|hsl)/i;
-function validateValueForType(type, value) {
-  if (type === VARIABLE_TYPES.FONT && LENGTH_UNIT_PATTERN.test(value.trim())) {
-    return `Font variable value must be a font family name (e.g. "Roboto"), not a size value like "${value}". Use "global-size-variable" or "global-custom-size-variable" for spacing/size values.`;
-  }
-  if (type === VARIABLE_TYPES.COLOR && !COLOR_PATTERN.test(value.trim())) {
-    return `Color variable value should be a CSS color (e.g. "#FF0000"), got "${value}".`;
-  }
-  if (type === VARIABLE_TYPES.SIZE && !LENGTH_UNIT_PATTERN.test(value.trim())) {
-    return `Size variable value should include a CSS unit (e.g. "16px") or be "auto", got "${value}".`;
-  }
-  if (type === VARIABLE_TYPES.FONT && !isFontAvailable(value)) {
-    return `Font "${value}" is not supported in WordPress. Please choose one of the available font families.`;
-  }
-  return null;
-}
-function isFontAvailable(font) {
-  const fonts = getFontConfigs();
-  const key = font.trim();
-  return !!fonts?.[key];
-}
 var initManageVariableTool = (reg) => {
   const { addTool, resource } = reg;
-  const RUNTIME_ALLOWED_VARIABLE_TYPES = isProActive2() ? [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT, VARIABLE_TYPES.SIZE, VARIABLE_TYPES.CUSTOM_SIZE] : [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT];
+  const RUNTIME_ALLOWED_VARIABLE_TYPES = isProActive() ? [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT, VARIABLE_TYPES.SIZE, VARIABLE_TYPES.CUSTOM_SIZE] : [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT];
   resource(
     "manage-global-variable-guide",
     MANAGE_VARIABLES_GUIDE_URI,
@@ -4028,12 +3927,17 @@ var initManageVariableTool = (reg) => {
       description: "Detailed guide for using the manage-global-variable tool",
       mimeType: "text/plain"
     },
-    async (uri) => ({
-      contents: [{ uri: uri.href, mimeType: "text/plain", text: generateVariablesPrompt() }]
-    })
+    async (uri) => {
+      const { data } = await httpService3().get(MCP_PROXY_URL2, {
+        params: { uri: uri.href }
+      });
+      return {
+        contents: [{ uri: uri.href, mimeType: "text/plain", text: data.data }]
+      };
+    }
   );
   addTool({
-    name: "manage-global-variable",
+    name: TOOL_NAME,
     description: "Manage V4 global variables (color, font, size, custom-size). Read the guide resource before use. font = font-famliy, size = measured unit, custom-size = calculated values",
     schema: {
       action: z3.enum(["create", "update", "delete"]),
@@ -4057,60 +3961,14 @@ var initManageVariableTool = (reg) => {
     ],
     isDestructive: true,
     handler: async (params) => {
-      const operations = getServiceActions(service);
-      const op = operations[params.action];
-      if (op) {
-        await op(params);
-        return { status: "ok" };
-      }
-      throw new Error(`Unknown action ${params.action}`);
+      await httpService3().post(MCP_PROXY_URL2, {
+        tool: TOOL_NAME,
+        input: params
+      });
+      return { status: "ok" };
     }
   });
 };
-function getServiceActions(svc) {
-  return {
-    create({ type, label, value }) {
-      if (!type || !label || !value) {
-        throw new Error("Create requires type, label, and value");
-      }
-      if ((type === VARIABLE_TYPES.SIZE || type === VARIABLE_TYPES.CUSTOM_SIZE) && !isProActive2()) {
-        throw new Error("Creating size variables requires Elementor Pro.");
-      }
-      const labelError = validateLabel(label);
-      if (labelError) {
-        throw new Error(labelError);
-      }
-      const valueError = validateValueForType(type, value);
-      if (valueError) {
-        throw new Error(valueError);
-      }
-      return svc.create({ type, label, value }, { eventData: { executedBy: "mcp_tool" } });
-    },
-    update({ id, label, value }) {
-      if (!id || !label || !value) {
-        throw new Error("Update requires id, label, and value");
-      }
-      const labelError = validateLabel(label);
-      if (labelError) {
-        throw new Error(labelError);
-      }
-      const existingVariable = svc.variables()[id];
-      if (existingVariable) {
-        const valueError = validateValueForType(existingVariable.type, value);
-        if (valueError) {
-          throw new Error(valueError);
-        }
-      }
-      return svc.update(id, { label, value }, { eventData: { executedBy: "mcp_tool" } });
-    },
-    delete({ id }) {
-      if (!id) {
-        throw new Error("delete requires id");
-      }
-      return svc.delete(id);
-    }
-  };
-}
 
 // src/mcp/index.ts
 function initMcp(reg, canvasMcpEntry) {