@elementor/editor-variables 4.1.0-838 → 4.1.0-beta2

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,10 +1060,30 @@ 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 });
-      setIsDirty(true);
+      const hasChanges = Object.entries(newVariables).some(([id2, newVar]) => {
+        const existingVar = variables[id2];
+        if (!existingVar) {
+          return true;
+        }
+        return existingVar.label !== newVar.label || existingVar.value !== newVar.value || existingVar.order !== newVar.order || existingVar.type !== newVar.type || (existingVar.sync_to_v3 ?? false) !== (newVar.sync_to_v3 ?? false);
+      });
+      if (hasChanges) {
+        setVariables({ ...variables, ...newVariables });
+        setIsDirty(true);
+      }
     },
     [variables]
   );
@@ -1792,7 +1813,7 @@ var VariableRow = (props) => {
           value,
           onChange,
           onPropTypeKeyChange: (type) => {
-            if (!isDisabled) {
+            if (!isDisabled && type !== row.type) {
               handleOnChange({
                 ...variables,
                 [row.id]: { ...variables[row.id], type }
@@ -2321,8 +2342,7 @@ function VariablesManagerPanelRoot({
           display: "flex",
           flexDirection: "column",
           flex: 1,
-          minHeight: 0,
-          overflow: "hidden"
+          minHeight: 0
         }
       },
       bodyInner
@@ -2401,7 +2421,7 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_controls18 = require("@elementor/editor-controls");
-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_props10 = require("@elementor/editor-props");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
@@ -2412,14 +2432,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);
@@ -3920,6 +3933,84 @@ var trackOpenVariablePopover = (path, variableType) => {
 
 // src/mcp/manage-variable-tool.ts
 var import_schema3 = require("@elementor/schema");
+var import_utils4 = require("@elementor/utils");
+
+// src/mcp/variable-tool-prompt.ts
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_utils3 = require("@elementor/utils");
+var MANAGE_VARIABLES_GUIDE_URI = "elementor://variables/tools/manage-global-variable-guide";
+var generateVariablesPrompt = () => {
+  const prompt = (0, import_editor_mcp.toolPrompts)("manage-global-variable");
+  const proIsActive = (0, import_utils3.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
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
@@ -3956,22 +4047,59 @@ 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);
   });
 };
 
 // src/mcp/manage-variable-tool.ts
+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}".`;
+  }
+  return null;
+}
 var initManageVariableTool = (reg) => {
-  const { addTool } = reg;
+  const { addTool, resource } = reg;
+  resource(
+    "manage-global-variable-guide",
+    MANAGE_VARIABLES_GUIDE_URI,
+    {
+      title: "Manage Global Variable Guide",
+      description: "Detailed guide for using the manage-global-variable tool",
+      mimeType: "text/plain"
+    },
+    async (uri) => ({
+      contents: [{ uri: uri.href, mimeType: "text/plain", text: generateVariablesPrompt() }]
+    })
+  );
   addTool({
     name: "manage-global-variable",
+    description: "Manage V4 global variables (color, font, size). Read the guide resource before use.",
     schema: {
       action: import_schema3.z.enum(["create", "update", "delete"]).describe("Operation to perform"),
-      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)")
+      id: import_schema3.z.string().optional().describe("Variable id \u2014 required for update/delete. Get from the global-variables resource."),
+      type: import_schema3.z.string().optional().describe(
+        'Variable type \u2014 required for create. One of: "global-color-variable", "global-font-variable", "global-size-variable", "global-custom-size-variable" (size types require Elementor Pro). NEVER store px/rem values in a font variable.'
+      ),
+      label: import_schema3.z.string().optional().describe("Variable label (lowercase, dash-separated) \u2014 required for create/update."),
+      value: import_schema3.z.string().optional().describe(
+        'Plain CSS value \u2014 required for create/update. Color: hex/rgba/hsl. Font: family name only, never px/rem. Size: value with unit e.g. "16px", or "auto" (Pro). Do NOT pass JSON.'
+      )
     },
     outputSchema: {
       status: import_schema3.z.enum(["ok"]).describe("Operation status"),
@@ -3982,32 +4110,22 @@ var initManageVariableTool = (reg) => {
       speedPriority: 0.75
     },
     requiredResources: [
+      { uri: MANAGE_VARIABLES_GUIDE_URI, description: "Full guide for variable types, naming rules, and usage" },
       {
         uri: GLOBAL_VARIABLES_URI,
-        description: "Global variables"
+        description: "Current global variables \u2014 check before creating to avoid duplicates"
       }
     ],
-    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"
-`,
+    isDestructive: true,
     handler: async (params) => {
       const operations = getServiceActions(service);
       const op = operations[params.action];
       if (op) {
         await op(params);
-        return {
-          status: "ok"
-        };
+        return { status: "ok" };
       }
       throw new Error(`Unknown action ${params.action}`);
-    },
-    isDestructive: true
-    // Because delete is destructive
+    }
   });
 };
 function getServiceActions(svc) {
@@ -4016,10 +4134,17 @@ function getServiceActions(svc) {
       if (!type || !label || !value) {
         throw new Error("Create requires type, label, and value");
       }
+      if ((type === VARIABLE_TYPES.SIZE || type === VARIABLE_TYPES.CUSTOM_SIZE) && !(0, import_utils4.isProActive)()) {
+        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 });
     },
     update({ id: id2, label, value }) {
@@ -4030,6 +4155,13 @@ function getServiceActions(svc) {
       if (labelError) {
         throw new Error(labelError);
       }
+      const existingVariable = svc.variables()[id2];
+      if (existingVariable) {
+        const valueError = validateValueForType(existingVariable.type, value);
+        if (valueError) {
+          throw new Error(valueError);
+        }
+      }
       return svc.update(id2, { label, value });
     },
     delete({ id: id2 }) {
@@ -4043,15 +4175,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 +4686,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_mcp2.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_mcp2.getMCPByDomain)("canvas"));
   });
   (0, import_editor.injectIntoTop)({
     id: "canvas-style-variables-render",