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

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,6 +1036,17 @@ 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 });
@@ -1335,7 +1347,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 +1472,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 +1500,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?.();
@@ -1832,7 +1844,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 +2012,7 @@ function VariablesManagerPanelRoot({
     }
     void closePanel();
   }, [isDirty, openSaveChangesDialog, closePanel]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!embedded || !onExposeCloseAttempt) {
       return;
     }
@@ -2305,8 +2317,7 @@ function VariablesManagerPanelRoot({
           display: "flex",
           flexDirection: "column",
           flex: 1,
-          minHeight: 0,
-          overflow: "hidden"
+          minHeight: 0
         }
       },
       bodyInner
@@ -2351,7 +2362,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 +2403,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 +2419,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 +2431,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 +2445,7 @@ function OpenPanelFromEvent() {
       }
     });
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const handler = () => {
       pendingRef.current = true;
       openRoute(DEFAULT_PANEL_ROUTE);
@@ -2453,7 +2457,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 +2465,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 +2718,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 +2795,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 +2960,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 +3150,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  useEffect8(() => {
+  useEffect9(() => {
     if (disabled) {
       trackViewPromotion2({
         target_name: "variables_popover",
@@ -3959,7 +3963,7 @@ var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
         };
       }
     );
-    window.addEventListener("variables:updated", notifyGlobalVariablesUpdated);
+    window.addEventListener(STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
     listenTo3(commandEndEvent("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
@@ -3974,7 +3978,9 @@ var initManageVariableTool = (reg) => {
       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)")
+      value: z3.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: z3.enum(["ok"]).describe("Operation status"),
@@ -3990,14 +3996,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];
@@ -4046,15 +4049,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 +4256,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 +4280,7 @@ function usePortalContainer() {
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState20({});
-  useEffect9(() => {
+  useEffect10(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {
       unsubscribe();
@@ -4583,7 +4577,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",