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

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React14 from "react";
-import { useCallback as useCallback6, useEffect as useEffect3, useMemo as useMemo3, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import {
   __createPanel as createPanel,
@@ -310,12 +310,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 = {
@@ -871,7 +872,7 @@ var useErrorNavigation = () => {
 };
 
 // src/components/variables-manager/hooks/use-variables-manager-state.ts
-import { useCallback as useCallback3, useState as useState2 } from "react";
+import { useCallback as useCallback3, useEffect, useState as useState2 } from "react";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
@@ -1035,10 +1036,30 @@ var useVariablesManagerState = () => {
   const [isDirty, setIsDirty] = useState2(false);
   const [isSaving, setIsSaving] = useState2(false);
   const [searchValue, setSearchValue] = useState2("");
+  useEffect(() => {
+    const handleStorageUpdated = () => {
+      setVariables(getVariables(false));
+      setDeletedVariables([]);
+      setIsDirty(false);
+    };
+    window.addEventListener(STORAGE_UPDATED_EVENT, handleStorageUpdated);
+    return () => {
+      window.removeEventListener(STORAGE_UPDATED_EVENT, handleStorageUpdated);
+    };
+  }, []);
   const handleOnChange = useCallback3(
     (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]
   );
@@ -1335,7 +1356,7 @@ var getDefaultName = (variables, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 import * as React13 from "react";
-import { useEffect as useEffect2, useRef as useRef6 } from "react";
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
 import {
   Table,
   TableBody,
@@ -1460,7 +1481,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1488,10 +1509,10 @@ var VariableEditableCell = React10.memo(
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    useEffect(() => {
+    useEffect2(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    useEffect(() => {
+    useEffect2(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1776,7 +1797,7 @@ var VariableRow = (props) => {
           value,
           onChange,
           onPropTypeKeyChange: (type) => {
-            if (!isDisabled) {
+            if (!isDisabled && type !== row.type) {
               handleOnChange({
                 ...variables,
                 [row.id]: { ...variables[row.id], type }
@@ -1832,7 +1853,7 @@ var VariablesManagerTable = ({
 }) => {
   const tableContainerRef = useRef6(null);
   const variableRowRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  useEffect3(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -2000,7 +2021,7 @@ function VariablesManagerPanelRoot({
     }
     void closePanel();
   }, [isDirty, openSaveChangesDialog, closePanel]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!embedded || !onExposeCloseAttempt) {
       return;
     }
@@ -2305,8 +2326,7 @@ function VariablesManagerPanelRoot({
           display: "flex",
           flexDirection: "column",
           flex: 1,
-          minHeight: 0,
-          overflow: "hidden"
+          minHeight: 0
         }
       },
       bodyInner
@@ -2351,7 +2371,7 @@ function VariablesManagerPanelRoot({
   return embedded ? core : /* @__PURE__ */ React14.createElement(ThemeProvider, null, core);
 }
 var usePreventUnload = (isDirty) => {
-  useEffect3(() => {
+  useEffect4(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2392,18 +2412,11 @@ import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-
 import { controlActionsMenu } from "@elementor/menus";
 
 // src/components/global-styles-import-listener.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { GLOBAL_STYLES_IMPORTED_EVENT } from "@elementor/editor-canvas";
 function GlobalStylesImportListener() {
-  useEffect4(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedVars = event.detail?.global_variables;
-      if (!importedVars) {
-        return;
-      }
-      if (importedVars.data && typeof importedVars.data === "object") {
-        styleVariablesRepository.update(importedVars.data);
-      }
+  useEffect5(() => {
+    const handleGlobalStylesImported = () => {
       service.load();
     };
     window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
@@ -2415,7 +2428,7 @@ function GlobalStylesImportListener() {
 }
 
 // src/components/open-panel-from-event.tsx
-import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
 import {
   __privateListenTo as listenTo,
   __privateOpenRoute as openRoute,
@@ -2427,13 +2440,13 @@ function OpenPanelFromEvent() {
   const { open } = usePanelActions();
   const pendingRef = useRef7(false);
   const [readyToOpen, setReadyToOpen] = useState7(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (readyToOpen) {
       setReadyToOpen(false);
       open();
     }
   }, [readyToOpen, open]);
-  useEffect5(() => {
+  useEffect6(() => {
     return listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
       if (pendingRef.current) {
         pendingRef.current = false;
@@ -2441,7 +2454,7 @@ function OpenPanelFromEvent() {
       }
     });
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const handler = () => {
       pendingRef.current = true;
       openRoute(DEFAULT_PANEL_ROUTE);
@@ -2453,7 +2466,7 @@ function OpenPanelFromEvent() {
 }
 
 // src/components/open-panel-from-url.tsx
-import { useEffect as useEffect6, useRef as useRef8 } from "react";
+import { useEffect as useEffect7, useRef as useRef8 } from "react";
 import { __privateListenTo as listenTo2, routeOpenEvent as routeOpenEvent2 } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "variables-manager";
@@ -2461,7 +2474,7 @@ var DEFAULT_PANEL_ROUTE2 = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
   const hasOpened = useRef8(false);
-  useEffect6(() => {
+  useEffect7(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2714,7 +2727,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React19 from "react";
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { PopoverHeader as PopoverHeader2, SectionPopoverBody as SectionPopoverBody2 } from "@elementor/editor-ui";
@@ -2791,7 +2804,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const userPermissions = usePermissions();
   const [value, setValue] = useState11(() => variable.value);
   const [label, setLabel] = useState11(() => variable.label);
-  useEffect7(() => {
+  useEffect8(() => {
     styleVariablesRepository.update({
       [editId]: {
         ...variable,
@@ -2956,7 +2969,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import { useEffect as useEffect8, useState as useState12 } from "react";
+import { useEffect as useEffect9, useState as useState12 } from "react";
 import * as React21 from "react";
 import { trackUpgradePromotionClick as trackUpgradePromotionClick2, trackViewPromotion as trackViewPromotion2 } from "@elementor/editor-controls";
 import {
@@ -3146,7 +3159,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (disabled) {
       trackViewPromotion2({
         target_name: "variables_popover",
@@ -3923,6 +3936,84 @@ var trackOpenVariablePopover = (path, variableType) => {
 
 // src/mcp/manage-variable-tool.ts
 import { z as z3 } from "@elementor/schema";
+import { isProActive as isProActive2 } 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 listenTo3, commandEndEvent } from "@elementor/editor-v1-adapters";
@@ -3959,22 +4050,59 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
         };
       }
     );
-    window.addEventListener("variables:updated", notifyGlobalVariablesUpdated);
+    window.addEventListener(STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
     listenTo3(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: z3.enum(["create", "update", "delete"]).describe("Operation to perform"),
-      id: z3.string().optional().describe("Variable id (required for update/delete). Get from list-global-variables."),
-      type: z3.string().optional().describe('Variable type: "global-color-variable" or "global-font-variable" (required for create)'),
-      label: z3.string().optional().describe("Variable label (required for create/update)"),
-      value: z3.string().optional().describe("Variable value (required for create/update)")
+      id: z3.string().optional().describe("Variable id \u2014 required for update/delete. Get from the global-variables resource."),
+      type: z3.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: z3.string().optional().describe("Variable label (lowercase, dash-separated) \u2014 required for create/update."),
+      value: z3.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: z3.enum(["ok"]).describe("Operation status"),
@@ -3985,32 +4113,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) {
@@ -4019,10 +4137,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) && !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 });
     },
     update({ id: id2, label, value }) {
@@ -4033,6 +4158,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 }) {
@@ -4046,15 +4178,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);
 }
@@ -4262,7 +4385,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React38 from "react";
-import { useEffect as useEffect9, useState as useState20 } from "react";
+import { useEffect as useEffect10, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
   commandEndEvent as commandEndEvent2,
@@ -4286,7 +4409,7 @@ function usePortalContainer() {
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState20({});
-  useEffect9(() => {
+  useEffect10(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4583,7 +4706,15 @@ function init() {
     useProps: usePropVariableAction
   });
   service.init().then(() => {
-    initMcp(getMCPByDomain("variables"), getMCPByDomain("canvas"));
+    const variablesMcpRegistry = 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, getMCPByDomain("canvas"));
   });
   injectIntoTop({
     id: "canvas-style-variables-render",