@elementor/editor-variables 4.1.0 → 4.2.0-840

package/dist/index.mjs

@@ -1,16 +1,211 @@
-// src/init.ts
-import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
-import { registerControlReplacement } from "@elementor/editor-controls";
-import { getMCPByDomain } from "@elementor/editor-mcp";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { isTransformable as isTransformable2 } from "@elementor/editor-props";
-import { controlActionsMenu } from "@elementor/menus";
+// 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 { useSuppressedMessage } from "@elementor/editor-current-user";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, CopyIcon, TrashIcon } from "@elementor/icons";
+import {
+  Alert,
+  AlertAction,
+  AlertTitle,
+  Box as Box2,
+  Button as Button2,
+  CloseButton,
+  Divider,
+  Infotip,
+  Stack as Stack6,
+  usePopupState as usePopupState2
+} from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 
-// src/components/global-styles-import-listener.tsx
-import { useEffect } from "react";
+// src/utils/tracking.ts
+import { getMixpanel } from "@elementor/events";
+var trackVariableEvent = ({ varType, controlPath, action }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  dispatchEvent?.(name, {
+    location: config?.locations?.variables || "",
+    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
+    trigger: config?.triggers?.click || "",
+    var_type: varType,
+    control_path: controlPath,
+    action_type: name
+  });
+};
+var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
+  const { dispatchEvent, config } = getMixpanel();
+  if (!config?.names?.variables?.[action]) {
+    return;
+  }
+  const name = config.names.variables[action];
+  const eventData = {
+    location: config?.locations?.variablesManager || "",
+    trigger: config?.triggers?.click || "",
+    action_type: name
+  };
+  if (varType) {
+    eventData.var_type = varType;
+  }
+  if (controlPath) {
+    eventData.style_control_path = controlPath;
+  }
+  dispatchEvent?.(name, eventData);
+};
+var trackVariableSyncToV3 = ({ variableLabel, action }) => {
+  try {
+    const { dispatchEvent, config } = getMixpanel();
+    if (!config?.names?.variables?.variableSyncToV3) {
+      return;
+    }
+    const name = config.names.variables.variableSyncToV3;
+    const isSync = action === "sync";
+    dispatchEvent?.(name, {
+      interaction_type: "click",
+      target_type: variableLabel,
+      target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+      interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
+      target_location: "widget_panel",
+      location_l1: "var_manager",
+      interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
+    });
+  } catch {
+  }
+};
+
+// src/utils/validations.ts
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
+import { __, sprintf } from "@wordpress/i18n";
+var ERROR_MESSAGES = {
+  MISSING_VARIABLE_NAME: __("Give your variable a name.", "elementor"),
+  MISSING_VARIABLE_VALUE: __("Add a value to complete your variable.", "elementor"),
+  INVALID_CHARACTERS: __("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
+  NO_NON_SPECIAL_CHARACTER: __("Names have to include at least one non-special character.", "elementor"),
+  VARIABLE_LABEL_MAX_LENGTH: __("Keep names up to 50 characters.", "elementor"),
+  DUPLICATED_LABEL: __("This variable name already exists. Please choose a unique name.", "elementor"),
+  UNEXPECTED_ERROR: __("There was a glitch. Try saving your variable again.", "elementor"),
+  BATCH: {
+    DUPLICATED_LABELS: (count, name) => (
+      // eslint-disable-next-line @wordpress/i18n-translator-comments
+      sprintf(__("We found %1$d duplicated %2$s.", "elementor"), count, name)
+    ),
+    UNEXPECTED_ERROR: __("There was a glitch.", "elementor"),
+    DUPLICATED_LABEL_ACTION: __("Take me there", "elementor"),
+    DUPLICATED_LABEL_ACTION_MESSAGE: __("Please rename the variables.", "elementor"),
+    UNEXPECTED_ERROR_ACTION_MESSAGE: __("Try saving your variables again.", "elementor")
+  }
+};
+var VARIABLE_LABEL_MAX_LENGTH = 50;
+var mapServerError = (error) => {
+  if (error?.response?.data?.code === "duplicated_label") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.DUPLICATED_LABEL
+    };
+  }
+  if (error?.response?.data?.code === "batch_duplicated_label") {
+    const errorData = error?.response?.data?.data ?? {};
+    const count = Object.keys(errorData).length;
+    const name = count === 1 ? "name" : "names";
+    const duplicatedIds = Object.keys(errorData);
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
+      severity: "error",
+      IconComponent: AlertTriangleFilledIcon,
+      action: {
+        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
+        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
+        data: {
+          duplicatedIds
+        }
+      }
+    };
+  }
+  if (error?.response?.data?.code === "batch_operation_failed") {
+    return {
+      field: "label",
+      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+      severity: "secondary",
+      IconComponent: InfoCircleFilledIcon,
+      action: {
+        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
+      }
+    };
+  }
+  return void 0;
+};
+var validateLabel = (name, variables) => {
+  if (!name.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
+  }
+  const allowedChars = /^[a-zA-Z0-9_-]+$/;
+  if (!allowedChars.test(name)) {
+    return ERROR_MESSAGES.INVALID_CHARACTERS;
+  }
+  const hasAlphanumeric = /[a-zA-Z0-9]/;
+  if (!hasAlphanumeric.test(name)) {
+    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
+  }
+  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
+    return ERROR_MESSAGES.DUPLICATED_LABEL;
+  }
+  return "";
+};
+var labelHint = (name) => {
+  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
+  if (hintThreshold < name.length) {
+    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+  }
+  return "";
+};
+var validateValue = (value) => {
+  if (!value.trim()) {
+    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+  }
+  return "";
+};
+
+// src/variables-registry/create-variable-type-registry.ts
+import {
+  stylesInheritanceTransformersRegistry,
+  styleTransformersRegistry
+} from "@elementor/editor-canvas";
+
+// src/transformers/inheritance-transformer.tsx
+import * as React from "react";
+import { createTransformer } from "@elementor/editor-canvas";
+import { Stack, Typography } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+
+// src/components/ui/color-indicator.tsx
+import { styled, UnstableColorIndicator } from "@elementor/ui";
+var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`,
+  marginRight: theme.spacing(0.25)
+}));
+
+// src/prop-types/color-variable-prop-type.ts
+import { createPropUtils } from "@elementor/editor-props";
+import { z } from "@elementor/schema";
+var colorVariablePropTypeUtil = createPropUtils("global-color-variable", z.string());
 
 // src/service.ts
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -175,9 +370,9 @@ var Storage = class {
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
 // src/prop-types/font-variable-prop-type.ts
-import { createPropUtils } from "@elementor/editor-props";
-import { z } from "@elementor/schema";
-var fontVariablePropTypeUtil = createPropUtils("global-font-variable", z.string());
+import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
+import { z as z2 } from "@elementor/schema";
+var fontVariablePropTypeUtil = createPropUtils2("global-font-variable", z2.string());
 
 // src/create-style-variables-repository.ts
 var createStyleVariablesRepository = () => {
@@ -289,7 +484,7 @@ var service = {
     return apiClient.create(type, label, value).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -311,7 +506,7 @@ var service = {
     return apiClient.update(id2, label, value, type).then((response) => {
       const { success, data: payload } = response.data;
       if (!success) {
-        const errorMessage = payload?.message || __("Unexpected response from server", "elementor");
+        const errorMessage = payload?.message || __2("Unexpected response from server", "elementor");
         throw new Error(errorMessage);
       }
       return payload;
@@ -394,269 +589,32 @@ var service = {
         results.forEach((result) => {
           const variableId = result.id;
           if (result.variable) {
-            if (result.type === "create") {
-              storage.add(variableId, result.variable);
-            } else {
-              storage.update(variableId, result.variable);
-            }
-            styleVariablesRepository.update({
-              [variableId]: result.variable
-            });
-          }
-        });
-      }
-      return {
-        success: true,
-        watermark,
-        operations: operations.length
-      };
-    });
-  }
-};
-var handleWatermark = (operation, newWatermark) => {
-  if (storage.watermarkDiff(operation, newWatermark)) {
-    setTimeout(() => service.load(), 500);
-  }
-  storage.watermark(newWatermark);
-};
-
-// src/components/global-styles-import-listener.tsx
-function GlobalStylesImportListener() {
-  useEffect(() => {
-    const handleGlobalStylesImported = (event) => {
-      const importedVars = event.detail?.global_variables;
-      if (!importedVars) {
-        return;
-      }
-      if (importedVars.data && typeof importedVars.data === "object") {
-        styleVariablesRepository.update(importedVars.data);
-      }
-      service.load();
-    };
-    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
-    return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
-    };
-  }, []);
-  return null;
-}
-
-// src/components/open-panel-from-event.tsx
-import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
-import {
-  __privateListenTo as listenTo,
-  __privateOpenRoute as openRoute,
-  routeOpenEvent
-} from "@elementor/editor-v1-adapters";
-
-// src/components/variables-manager/variables-manager-panel.tsx
-import * as React14 from "react";
-import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
-import { useSuppressedMessage } from "@elementor/editor-current-user";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, SearchField, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { AlertTriangleFilledIcon as AlertTriangleFilledIcon2, ColorFilterIcon, CopyIcon, TrashIcon } from "@elementor/icons";
-import {
-  Alert,
-  AlertAction,
-  AlertTitle,
-  Button as Button2,
-  CloseButton,
-  Divider,
-  Infotip,
-  Stack as Stack6,
-  usePopupState as usePopupState2
-} from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
-
-// src/utils/tracking.ts
-import { getMixpanel } from "@elementor/events";
-var trackVariableEvent = ({ varType, controlPath, action }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  dispatchEvent?.(name, {
-    location: config?.locations?.variables || "",
-    secondaryLocation: config?.secondaryLocations?.variablesPopover || "",
-    trigger: config?.triggers?.click || "",
-    var_type: varType,
-    control_path: controlPath,
-    action_type: name
-  });
-};
-var trackVariablesManagerEvent = ({ action, varType, controlPath }) => {
-  const { dispatchEvent, config } = getMixpanel();
-  if (!config?.names?.variables?.[action]) {
-    return;
-  }
-  const name = config.names.variables[action];
-  const eventData = {
-    location: config?.locations?.variablesManager || "",
-    trigger: config?.triggers?.click || "",
-    action_type: name
-  };
-  if (varType) {
-    eventData.var_type = varType;
-  }
-  if (controlPath) {
-    eventData.style_control_path = controlPath;
-  }
-  dispatchEvent?.(name, eventData);
-};
-var trackVariableSyncToV3 = ({ variableLabel, action }) => {
-  try {
-    const { dispatchEvent, config } = getMixpanel();
-    if (!config?.names?.variables?.variableSyncToV3) {
-      return;
-    }
-    const name = config.names.variables.variableSyncToV3;
-    const isSync = action === "sync";
-    dispatchEvent?.(name, {
-      interaction_type: "click",
-      target_type: variableLabel,
-      target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
-      interaction_result: isSync ? "var_is_synced_to_V3" : "var_is_unsynced_from_V3",
-      target_location: "widget_panel",
-      location_l1: "var_manager",
-      interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
-    });
-  } catch {
-  }
-};
-
-// src/utils/validations.ts
-import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
-import { __ as __2, sprintf } from "@wordpress/i18n";
-var ERROR_MESSAGES = {
-  MISSING_VARIABLE_NAME: __2("Give your variable a name.", "elementor"),
-  MISSING_VARIABLE_VALUE: __2("Add a value to complete your variable.", "elementor"),
-  INVALID_CHARACTERS: __2("Use letters, numbers, dashes (-), or underscores (_) for the name.", "elementor"),
-  NO_NON_SPECIAL_CHARACTER: __2("Names have to include at least one non-special character.", "elementor"),
-  VARIABLE_LABEL_MAX_LENGTH: __2("Keep names up to 50 characters.", "elementor"),
-  DUPLICATED_LABEL: __2("This variable name already exists. Please choose a unique name.", "elementor"),
-  UNEXPECTED_ERROR: __2("There was a glitch. Try saving your variable again.", "elementor"),
-  BATCH: {
-    DUPLICATED_LABELS: (count, name) => (
-      // eslint-disable-next-line @wordpress/i18n-translator-comments
-      sprintf(__2("We found %1$d duplicated %2$s.", "elementor"), count, name)
-    ),
-    UNEXPECTED_ERROR: __2("There was a glitch.", "elementor"),
-    DUPLICATED_LABEL_ACTION: __2("Take me there", "elementor"),
-    DUPLICATED_LABEL_ACTION_MESSAGE: __2("Please rename the variables.", "elementor"),
-    UNEXPECTED_ERROR_ACTION_MESSAGE: __2("Try saving your variables again.", "elementor")
-  }
-};
-var VARIABLE_LABEL_MAX_LENGTH = 50;
-var mapServerError = (error) => {
-  if (error?.response?.data?.code === "duplicated_label") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.DUPLICATED_LABEL
-    };
-  }
-  if (error?.response?.data?.code === "batch_duplicated_label") {
-    const errorData = error?.response?.data?.data ?? {};
-    const count = Object.keys(errorData).length;
-    const name = count === 1 ? "name" : "names";
-    const duplicatedIds = Object.keys(errorData);
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
-      severity: "error",
-      IconComponent: AlertTriangleFilledIcon,
-      action: {
-        label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
-        message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
-        data: {
-          duplicatedIds
-        }
-      }
-    };
-  }
-  if (error?.response?.data?.code === "batch_operation_failed") {
-    return {
-      field: "label",
-      message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
-      severity: "secondary",
-      IconComponent: InfoCircleFilledIcon,
-      action: {
-        message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
-      }
-    };
-  }
-  return void 0;
-};
-var validateLabel = (name, variables) => {
-  if (!name.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
-  }
-  const allowedChars = /^[a-zA-Z0-9_-]+$/;
-  if (!allowedChars.test(name)) {
-    return ERROR_MESSAGES.INVALID_CHARACTERS;
-  }
-  const hasAlphanumeric = /[a-zA-Z0-9]/;
-  if (!hasAlphanumeric.test(name)) {
-    return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
-  }
-  if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
-  }
-  if (Object.values(variables ?? {}).some((variable) => variable.label === name)) {
-    return ERROR_MESSAGES.DUPLICATED_LABEL;
-  }
-  return "";
-};
-var labelHint = (name) => {
-  const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
-  if (hintThreshold < name.length) {
-    return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
+            if (result.type === "create") {
+              storage.add(variableId, result.variable);
+            } else {
+              storage.update(variableId, result.variable);
+            }
+            styleVariablesRepository.update({
+              [variableId]: result.variable
+            });
+          }
+        });
+      }
+      return {
+        success: true,
+        watermark,
+        operations: operations.length
+      };
+    });
   }
-  return "";
 };
-var validateValue = (value) => {
-  if (!value.trim()) {
-    return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
+var handleWatermark = (operation, newWatermark) => {
+  if (storage.watermarkDiff(operation, newWatermark)) {
+    setTimeout(() => service.load(), 500);
   }
-  return "";
+  storage.watermark(newWatermark);
 };
 
-// src/variables-registry/create-variable-type-registry.ts
-import {
-  stylesInheritanceTransformersRegistry,
-  styleTransformersRegistry
-} from "@elementor/editor-canvas";
-
-// src/transformers/inheritance-transformer.tsx
-import * as React from "react";
-import { createTransformer } from "@elementor/editor-canvas";
-import { Stack, Typography } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
-
-// src/components/ui/color-indicator.tsx
-import { styled, UnstableColorIndicator } from "@elementor/ui";
-var ColorIndicator = styled(UnstableColorIndicator)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`,
-  marginRight: theme.spacing(0.25)
-}));
-
-// src/prop-types/color-variable-prop-type.ts
-import { createPropUtils as createPropUtils2 } from "@elementor/editor-props";
-import { z as z2 } from "@elementor/schema";
-var colorVariablePropTypeUtil = createPropUtils2("global-color-variable", z2.string());
-
 // src/transformers/utils/resolve-css-variable.ts
 var resolveCssVariable = (id2, variable) => {
   let name = id2;
@@ -1267,7 +1225,12 @@ var TRACKING_DATA = {
   location_l1: "create variable menu"
 };
 var SIZE = "tiny";
-var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
+var VariableManagerCreateMenu = ({
+  variables,
+  onCreate,
+  menuState,
+  outlinedTrigger = false
+}) => {
   const buttonRef = useRef2(null);
   const variableTypes = getVariableTypes();
   const menuOptionConfigs = useMemo2(
@@ -1286,6 +1249,7 @@ var VariableManagerCreateMenu = ({ variables, onCreate, menuState }) => {
       ...bindTrigger(menuState),
       ref: buttonRef,
       size: SIZE,
+      variant: outlinedTrigger ? "outlined" : void 0,
       "aria-label": __8("Add variable", "elementor")
     },
     /* @__PURE__ */ React7.createElement(PlusIcon, { fontSize: SIZE })
@@ -1371,7 +1335,7 @@ var getDefaultName = (variables, baseName) => {
 
 // src/components/variables-manager/variables-manager-table.tsx
 import * as React13 from "react";
-import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { useEffect as useEffect2, useRef as useRef6 } from "react";
 import {
   Table,
   TableBody,
@@ -1496,7 +1460,7 @@ var LabelField = ({
 
 // src/components/variables-manager/variable-editable-cell.tsx
 import * as React10 from "react";
-import { useCallback as useCallback5, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect, useRef as useRef4, useState as useState5 } from "react";
 import { ClickAwayListener, Stack as Stack4 } from "@elementor/ui";
 var VariableEditableCell = React10.memo(
   ({
@@ -1524,10 +1488,10 @@ var VariableEditableCell = React10.memo(
       }
       setIsEditing(false);
     }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
-    useEffect2(() => {
+    useEffect(() => {
       onRowRef?.(rowRef?.current);
     }, [onRowRef]);
-    useEffect2(() => {
+    useEffect(() => {
       if (autoEdit && !isEditing && !disabled) {
         setIsEditing(true);
         onAutoEditComplete?.();
@@ -1868,7 +1832,7 @@ var VariablesManagerTable = ({
 }) => {
   const tableContainerRef = useRef6(null);
   const variableRowRefs = useRef6(/* @__PURE__ */ new Map());
-  useEffect3(() => {
+  useEffect2(() => {
     if (autoEditVariableId && tableContainerRef.current) {
       const rowElement = variableRowRefs.current.get(autoEditVariableId);
       if (rowElement) {
@@ -1974,8 +1938,33 @@ var { panel, usePanelActions } = createPanel({
   },
   isOpenPreviousElement: true
 });
+function VariablesManagerPanelEmbedded({
+  onRequestClose,
+  onExposeCloseAttempt
+}) {
+  return /* @__PURE__ */ React14.createElement(
+    VariablesManagerPanelRoot,
+    {
+      embedded: true,
+      onRequestClose,
+      onExposeCloseAttempt
+    }
+  );
+}
 function VariablesManagerPanel() {
-  const { close: closePanel } = usePanelActions();
+  return /* @__PURE__ */ React14.createElement(VariablesManagerPanelRoot, null);
+}
+function VariablesManagerPanelRoot({
+  embedded = false,
+  onRequestClose,
+  onExposeCloseAttempt
+} = {}) {
+  const { close: closeStandalonePanel } = usePanelActions();
+  const closePanel = useMemo3(
+    () => embedded ? onRequestClose ?? (async () => {
+    }) : closeStandalonePanel,
+    [embedded, onRequestClose, closeStandalonePanel]
+  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const [isStopSyncSuppressed] = useSuppressedMessage(STOP_SYNC_MESSAGE_KEY);
   const createMenuState = usePopupState2({
@@ -2004,13 +1993,20 @@ function VariablesManagerPanel() {
   const [stopSyncConfirmation, setStopSyncConfirmation] = useState6(null);
   const [serverError, setServerError] = useState6(null);
   usePreventUnload(isDirty);
-  const handleClosePanel = () => {
+  const handleClosePanel = useCallback6(() => {
     if (isDirty) {
       openSaveChangesDialog();
       return;
     }
-    closePanel();
-  };
+    void closePanel();
+  }, [isDirty, openSaveChangesDialog, closePanel]);
+  useEffect3(() => {
+    if (!embedded || !onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
   const handleCreateVariable = useCallback6(
     (type, defaultName, defaultValue) => {
       const newId = createVariable2(type, defaultName, defaultValue);
@@ -2128,82 +2124,57 @@ function VariablesManagerPanel() {
     [variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit]
   );
   const hasVariables = Object.keys(variables).length > 0;
-  return /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(
-    PanelHeader,
+  const variablesSearchFieldSx = embedded ? {
+    flex: 1,
+    minWidth: 0,
+    px: 0,
+    py: 0,
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "stretch"
+  } : {
+    display: "flex",
+    flex: 1
+  };
+  const searchField = /* @__PURE__ */ React14.createElement(
+    SearchField,
     {
-      sx: {
-        height: "unset"
-      }
-    },
-    /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "inherit" }), __10("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
-      VariableManagerCreateMenu,
-      {
-        onCreate: handleCreateVariable,
-        variables,
-        menuState: createMenuState
-      }
-    ), /* @__PURE__ */ React14.createElement(
-      CloseButton,
-      {
-        "aria-label": "Close",
-        slotProps: { icon: { fontSize: SIZE } },
-        onClick: () => {
-          handleClosePanel();
-        }
-      }
-    ))), /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(
-      SearchField,
-      {
-        sx: {
-          display: "flex",
-          flex: 1
-        },
-        placeholder: __10("Search", "elementor"),
-        value: searchValue,
-        onSearch: handleSearch
-      }
-    )), /* @__PURE__ */ React14.createElement(Divider, { sx: { width: "100%" } }))
-  ), /* @__PURE__ */ React14.createElement(
-    PanelBody,
+      placeholder: __10("Search", "elementor"),
+      value: searchValue,
+      onSearch: handleSearch,
+      sx: variablesSearchFieldSx
+    }
+  );
+  const bodyInner = /* @__PURE__ */ React14.createElement(React14.Fragment, null, hasVariables && /* @__PURE__ */ React14.createElement(
+    VariablesManagerTable,
     {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    hasVariables && /* @__PURE__ */ React14.createElement(
-      VariablesManagerTable,
-      {
-        menuActions: buildMenuActions,
-        variables,
-        onChange: handleOnChange,
-        autoEditVariableId,
-        onAutoEditComplete: handleAutoEditComplete,
-        onFieldError: setIsSaveDisabled
-      }
-    ),
-    !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
-      NoSearchResults,
-      {
-        searchValue,
-        onClear: () => handleSearch(""),
-        icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" })
-      }
-    ),
-    !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
-      EmptyState,
-      {
-        title: __10("Create your first variable", "elementor"),
-        message: __10(
-          "Variables are saved attributes that you can apply anywhere on your site.",
-          "elementor"
-        ),
-        icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" }),
-        onAdd: createMenuState.open
-      }
-    )
-  ), /* @__PURE__ */ React14.createElement(PanelFooter, null, /* @__PURE__ */ React14.createElement(
+      menuActions: buildMenuActions,
+      variables,
+      onChange: handleOnChange,
+      autoEditVariableId,
+      onAutoEditComplete: handleAutoEditComplete,
+      onFieldError: setIsSaveDisabled
+    }
+  ), !hasVariables && searchValue && /* @__PURE__ */ React14.createElement(
+    NoSearchResults,
+    {
+      searchValue,
+      onClear: () => handleSearch(""),
+      icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" })
+    }
+  ), !hasVariables && !searchValue && /* @__PURE__ */ React14.createElement(
+    EmptyState,
+    {
+      title: __10("Create your first variable", "elementor"),
+      message: __10(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "large" }),
+      onAdd: createMenuState.open
+    }
+  ));
+  const saveFooter = /* @__PURE__ */ React14.createElement(PanelFooter, null, /* @__PURE__ */ React14.createElement(
     Infotip,
     {
       placement: "right",
@@ -2247,7 +2218,8 @@ function VariablesManagerPanel() {
       },
       __10("Save changes", "elementor")
     )
-  ))), deleteConfirmation && /* @__PURE__ */ React14.createElement(
+  ));
+  const dialogs = /* @__PURE__ */ React14.createElement(React14.Fragment, null, deleteConfirmation && /* @__PURE__ */ React14.createElement(
     DeleteConfirmationDialog,
     {
       open: true,
@@ -2273,7 +2245,7 @@ function VariablesManagerPanel() {
           label: __10("Discard", "elementor"),
           action: () => {
             closeSaveChangesDialog();
-            closePanel();
+            void closePanel();
           }
         },
         confirm: {
@@ -2282,16 +2254,104 @@ function VariablesManagerPanel() {
             const result = await handleSaveClick();
             closeSaveChangesDialog();
             if (result?.success) {
-              closePanel();
+              void closePanel();
             }
           }
         }
       }
     }
   )));
+  const panelChrome = embedded ? /* @__PURE__ */ React14.createElement(
+    Stack6,
+    {
+      direction: "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      Stack6,
+      {
+        direction: "row",
+        alignItems: "center",
+        spacing: 1,
+        width: "100%",
+        sx: {
+          flexShrink: 0,
+          px: 2,
+          pb: 1
+        }
+      },
+      searchField,
+      /* @__PURE__ */ React14.createElement(Box2, { sx: { display: "flex", flexShrink: 0, alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
+        VariableManagerCreateMenu,
+        {
+          outlinedTrigger: true,
+          onCreate: handleCreateVariable,
+          variables,
+          menuState: createMenuState
+        }
+      ))
+    ),
+    /* @__PURE__ */ React14.createElement(Divider, { sx: { width: "100%" } }),
+    /* @__PURE__ */ React14.createElement(
+      PanelBody,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          minHeight: 0,
+          overflow: "hidden"
+        }
+      },
+      bodyInner
+    ),
+    saveFooter
+  ) : /* @__PURE__ */ React14.createElement(Panel, null, /* @__PURE__ */ React14.createElement(
+    PanelHeader,
+    {
+      sx: {
+        height: "unset"
+      }
+    },
+    /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React14.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React14.createElement(ColorFilterIcon, { fontSize: "inherit" }), __10("Variables Manager", "elementor"))), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React14.createElement(
+      VariableManagerCreateMenu,
+      {
+        onCreate: handleCreateVariable,
+        variables,
+        menuState: createMenuState
+      }
+    ), /* @__PURE__ */ React14.createElement(
+      CloseButton,
+      {
+        "aria-label": "Close",
+        slotProps: { icon: { fontSize: SIZE } },
+        onClick: () => {
+          handleClosePanel();
+        }
+      }
+    ))), /* @__PURE__ */ React14.createElement(Stack6, { width: "100%", direction: "row", gap: 1 }, searchField), /* @__PURE__ */ React14.createElement(Divider, { sx: { width: "100%" } }))
+  ), /* @__PURE__ */ React14.createElement(
+    PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    bodyInner
+  ), saveFooter);
+  const core = /* @__PURE__ */ React14.createElement(React14.Fragment, null, panelChrome, dialogs);
+  return embedded ? core : /* @__PURE__ */ React14.createElement(ThemeProvider, null, core);
 }
 var usePreventUnload = (isDirty) => {
-  useEffect4(() => {
+  useEffect3(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -2322,7 +2382,45 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   ));
 };
 
+// src/init.ts
+import { injectIntoLogic, injectIntoTop } from "@elementor/editor";
+import { registerControlReplacement } from "@elementor/editor-controls";
+import { getMCPByDomain } from "@elementor/editor-mcp";
+import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+import { isTransformable as isTransformable2 } from "@elementor/editor-props";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { controlActionsMenu } from "@elementor/menus";
+
+// src/components/global-styles-import-listener.tsx
+import { useEffect as useEffect4 } 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);
+      }
+      service.load();
+    };
+    window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
+    return () => {
+      window.removeEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
+    };
+  }, []);
+  return null;
+}
+
 // src/components/open-panel-from-event.tsx
+import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import {
+  __privateListenTo as listenTo,
+  __privateOpenRoute as openRoute,
+  routeOpenEvent
+} from "@elementor/editor-v1-adapters";
 var EVENT_NAME = "elementor/open-variables-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements/categories";
 function OpenPanelFromEvent() {
@@ -2392,7 +2490,7 @@ import { useId, useRef as useRef9 } from "react";
 import * as React24 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { bindPopover, bindTrigger as bindTrigger3, Box as Box5, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover, bindTrigger as bindTrigger3, Box as Box6, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -2418,11 +2516,11 @@ import { isExperimentActive } from "@elementor/editor-v1-adapters";
 // src/context/variable-selection-popover.context.tsx
 import * as React15 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState8 } from "react";
-import { Box as Box2 } from "@elementor/ui";
+import { Box as Box3 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = useState8(null);
-  return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box2, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React15.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React15.createElement(Box3, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
@@ -2876,14 +2974,14 @@ import { __ as __15, sprintf as sprintf3 } from "@wordpress/i18n";
 import * as React20 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box4, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
 var EDIT_LABEL = __14("Edit variable", "elementor");
 var MenuItemContent = ({ item, disabled = false }) => {
   const onEdit = item.onEdit;
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React20.createElement(
-    Box3,
+    Box4,
     {
       sx: {
         flex: 1,
@@ -3158,9 +3256,15 @@ var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
   const [currentView, setCurrentView] = useState13(VIEW_LIST);
   const [editId, setEditId] = useState13("");
-  const { open } = usePanelActions();
+  const { open: openStandaloneVariablesPanel } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
-    open();
+    if (isExperimentActive("e_editor_design_system_panel")) {
+      window.dispatchEvent(
+        new CustomEvent("elementor/toggle-design-system", { detail: { tab: "variables" } })
+      );
+    } else {
+      openStandaloneVariablesPanel();
+    }
   } : void 0;
   return /* @__PURE__ */ React22.createElement(VariableTypeProvider, { propTypeKey }, /* @__PURE__ */ React22.createElement(PopoverContentRefContextProvider, null, RenderView({
     propTypeKey,
@@ -3175,7 +3279,7 @@ var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable })
 };
 function RenderView(props) {
   const userPermissions = usePermissions();
-  const userQuotaPremissions = useQuotaPermissions(props.propTypeKey);
+  const userQuotaPermissions = useQuotaPermissions(props.propTypeKey);
   const handlers = {
     onClose: () => {
       props.closePopover();
@@ -3216,7 +3320,7 @@ function RenderView(props) {
         onAdd: handlers.onAdd,
         onEdit: handlers.onEdit,
         onSettings: handlers.onSettings,
-        disabled: !userQuotaPremissions.canAdd()
+        disabled: !userQuotaPermissions.canAdd()
       }
     );
   }
@@ -3240,7 +3344,7 @@ function RenderView(props) {
 // src/components/ui/tags/assigned-tag.tsx
 import * as React23 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
+import { Box as Box5, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var UNLINK_LABEL = __16("Unlink variable", "elementor");
@@ -3257,7 +3361,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
       fullWidth: true,
       showActionsOnHover: true,
       startIcon: /* @__PURE__ */ React23.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React23.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React23.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      label: /* @__PURE__ */ React23.createElement(Box5, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React23.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -3276,7 +3380,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React24.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(Box6, { ref: anchorRef }, /* @__PURE__ */ React24.createElement(
     AssignedTag,
     {
       label: variable.label,
@@ -3311,7 +3415,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 import * as React28 from "react";
 import { useId as useId2, useRef as useRef10, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
+import { Backdrop, bindPopover as bindPopover2, Box as Box8, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
@@ -3458,7 +3562,7 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 // src/components/ui/tags/warning-variable-tag.tsx
 import * as React27 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
+import { Box as Box7, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
 var WarningVariableTag = React27.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
@@ -3472,7 +3576,7 @@ var WarningVariableTag = React27.forwardRef(
         variant: "standard",
         onClick,
         icon: /* @__PURE__ */ React27.createElement(AlertTriangleFilledIcon4, null),
-        label: /* @__PURE__ */ React27.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React27.createElement(Box6, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React27.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        label: /* @__PURE__ */ React27.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React27.createElement(Box7, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React27.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),
@@ -3522,7 +3626,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React28.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Box8, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React28.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
     Infotip2,
     {
       color: "warning",
@@ -3584,7 +3688,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 import * as React30 from "react";
 import { useId as useId3, useRef as useRef11, useState as useState16 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
+import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/ui/mismatch-variable-alert.tsx
@@ -3639,7 +3743,7 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React30.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React30.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React30.createElement(Box9, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React30.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React30.createElement(
     Infotip3,
     {
       color: "warning",
@@ -3821,33 +3925,42 @@ var trackOpenVariablePopover = (path, variableType) => {
 import { z as z3 } from "@elementor/schema";
 
 // src/mcp/variables-resource.ts
+import { __privateListenTo as listenTo3, commandEndEvent } from "@elementor/editor-v1-adapters";
 var GLOBAL_VARIABLES_URI = "elementor://global-variables";
+var buildGlobalVariablesPayload = async () => {
+  const merged = {};
+  Object.entries(service.variables()).forEach(([id2, variable]) => {
+    if (!variable.deleted) {
+      merged[id2] = { ...variable, version: "v4" };
+    }
+  });
+  return merged;
+};
 var initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
   [canvasMcpEntry, variablesMcpEntry].forEach((entry) => {
     const { resource, sendResourceUpdated } = entry;
+    const notifyGlobalVariablesUpdated = () => {
+      sendResourceUpdated({
+        uri: GLOBAL_VARIABLES_URI
+      });
+    };
     resource(
       "global-variables",
       GLOBAL_VARIABLES_URI,
       {
-        description: "List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)"
+        description: "Global variables available (v4)"
       },
       async () => {
-        const variables = {};
-        Object.entries(service.variables()).forEach(([id2, variable]) => {
-          if (!variable.deleted) {
-            variables[id2] = variable;
-          }
-        });
+        const variables = await buildGlobalVariablesPayload();
         return {
-          contents: [{ uri: GLOBAL_VARIABLES_URI, text: JSON.stringify(variables) }]
+          contents: [
+            { uri: GLOBAL_VARIABLES_URI, mimeType: "application/json", text: JSON.stringify(variables) }
+          ]
         };
       }
     );
-    window.addEventListener("variables:updated", () => {
-      sendResourceUpdated({
-        uri: GLOBAL_VARIABLES_URI
-      });
-    });
+    window.addEventListener("variables:updated", notifyGlobalVariablesUpdated);
+    listenTo3(commandEndEvent("document/save/update"), notifyGlobalVariablesUpdated);
   });
 };
 
@@ -3906,12 +4019,20 @@ function getServiceActions(svc) {
       if (!type || !label || !value) {
         throw new Error("Create requires type, label, and value");
       }
+      const labelError = validateLabel(label);
+      if (labelError) {
+        throw new Error(labelError);
+      }
       return svc.create({ type, label, value });
     },
     update({ id: id2, label, value }) {
       if (!id2 || !label || !value) {
         throw new Error("Update requires id, label, and value");
       }
+      const labelError = validateLabel(label);
+      if (labelError) {
+        throw new Error(labelError);
+      }
       return svc.update(id2, { label, value });
     },
     delete({ id: id2 }) {
@@ -3992,7 +4113,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React36 from "react";
-import { useId as useId4, useMemo as useMemo3, useRef as useRef13, useState as useState19 } from "react";
+import { useId as useId4, useMemo as useMemo4, useRef as useRef13, useState as useState19 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector, useFontFamilies } from "@elementor/editor-controls";
 import { useSectionWidth } from "@elementor/editor-ui";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
@@ -4005,7 +4126,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
   const fontPopoverState = usePopupState6({ variant: "popover" });
   const fontFamilies = useFontFamilies();
   const sectionWidth = useSectionWidth();
-  const mapFontSubs = useMemo3(() => {
+  const mapFontSubs = useMemo4(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
@@ -4144,7 +4265,7 @@ import * as React38 from "react";
 import { useEffect as useEffect9, useState as useState20 } from "react";
 import {
   __privateUseListenTo as useListenTo,
-  commandEndEvent,
+  commandEndEvent as commandEndEvent2,
   getCanvasIframeDocument
 } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
@@ -4161,7 +4282,7 @@ function StyleVariablesRenderer() {
   return /* @__PURE__ */ React38.createElement(Portal, { container }, /* @__PURE__ */ React38.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return useListenTo(commandEndEvent2("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
   const [variables, setVariables] = useState20({});
@@ -4189,6 +4310,7 @@ import {
   backgroundColorOverlayPropTypeUtil,
   cssFilterFunctionPropUtil as cssFilterFunctionPropUtil2,
   dropShadowFilterPropTypeUtil as dropShadowFilterPropTypeUtil2,
+  moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2,
   shadowPropTypeUtil as shadowPropTypeUtil2
 } from "@elementor/editor-props";
@@ -4198,10 +4320,11 @@ import * as React39 from "react";
 import {
   cssFilterFunctionPropUtil,
   dropShadowFilterPropTypeUtil,
+  moveTransformPropTypeUtil,
   selectionSizePropTypeUtil,
   shadowPropTypeUtil
 } from "@elementor/editor-props";
-import { Box as Box9 } from "@elementor/ui";
+import { Box as Box10 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
 
 // src/utils/size-value.ts
@@ -4244,7 +4367,7 @@ var BackgroundRepeaterColorIndicator = ({ value }) => {
 };
 var BackgroundRepeaterLabel = ({ value }) => {
   const colorVariable = useColorVariable(value);
-  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, colorVariable?.label);
+  return /* @__PURE__ */ React39.createElement(Box10, { component: "span" }, colorVariable?.label);
 };
 var BoxShadowRepeaterColorIndicator = ({ value }) => {
   const colorVariable = useColorVariable(value);
@@ -4264,7 +4387,7 @@ var FilterSingleSizeRepeaterLabel = ({ value }) => {
   const args = cssFilterFunction?.args;
   const func = cssFilterFunction?.func?.value ?? "";
   const rendered = sizeValue(args?.value?.size);
-  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Box9, { component: "span", style: { textTransform: "capitalize" } }, `${func}: `), /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, rendered));
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(Box10, { component: "span", style: { textTransform: "capitalize" } }, `${func}: `), /* @__PURE__ */ React39.createElement(Box10, { component: "span" }, rendered));
 };
 var FilterDropShadowRepeaterLabel = ({ value }) => {
   const { args } = cssFilterFunctionPropUtil.extract(value) || {};
@@ -4276,7 +4399,7 @@ var FilterDropShadowRepeaterLabel = ({ value }) => {
       labels.push(rendered);
     }
   }
-  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, __27("Drop shadow:", "elementor"), " ", labels.join(" "));
+  return /* @__PURE__ */ React39.createElement(Box10, { component: "span" }, __27("Drop shadow:", "elementor"), " ", labels.join(" "));
 };
 var BoxShadowRepeaterLabel = ({ value }) => {
   const { position, hOffset, vOffset, blur, spread } = shadowPropTypeUtil.extract(value) || {};
@@ -4288,7 +4411,21 @@ var BoxShadowRepeaterLabel = ({ value }) => {
     }
   }
   const positionLabel = position?.value || "outset";
-  return /* @__PURE__ */ React39.createElement(Box9, { component: "span", style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
+  return /* @__PURE__ */ React39.createElement(Box10, { component: "span", style: { textTransform: "capitalize" } }, positionLabel, ": ", labels.join(" "));
+};
+var TransformRepeaterLabel = ({ value }) => {
+  const labels = [];
+  if (moveTransformPropTypeUtil.isValid(value)) {
+    labels.push(__27("Move:", "elementor"));
+    const { x, y, z: z6 } = moveTransformPropTypeUtil.extract(value) || {};
+    for (const val of [x, y, z6]) {
+      const rendered = sizeValue(val);
+      if (rendered) {
+        labels.push(rendered);
+      }
+    }
+  }
+  return /* @__PURE__ */ React39.createElement(Box10, { component: "span" }, labels.join(" "));
 };
 var TransitionsSizeVariableLabel = ({ value: prop }) => {
   let label = "";
@@ -4301,7 +4438,7 @@ var TransitionsSizeVariableLabel = ({ value: prop }) => {
     }
     label += variable?.value;
   }
-  return /* @__PURE__ */ React39.createElement(Box9, { component: "span" }, label);
+  return /* @__PURE__ */ React39.createElement(Box10, { component: "span" }, label);
 };
 
 // src/repeater-injections.ts
@@ -4309,6 +4446,7 @@ function registerRepeaterInjections() {
   backgroundOverlayRepeaterInjections();
   boxShadowRepeaterInjections();
   transitionsRepeaterInjections();
+  transformRepeaterInjections();
   filterRepeaterInjections();
 }
 function backgroundOverlayRepeaterInjections() {
@@ -4345,6 +4483,19 @@ function boxShadowRepeaterInjections() {
     }
   });
 }
+function transformRepeaterInjections() {
+  injectIntoRepeaterItemLabel({
+    id: "transform-size-variables-label",
+    component: TransformRepeaterLabel,
+    condition: ({ value }) => {
+      if (moveTransformPropTypeUtil2.isValid(value)) {
+        const { x: xAxis, y: yAxis, z: zAxis } = moveTransformPropTypeUtil2.extract(value) || {};
+        return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(zAxis);
+      }
+      return false;
+    }
+  });
+}
 function transitionsRepeaterInjections() {
   injectIntoRepeaterItemLabel({
     id: "transition-size-variables-label",
@@ -4442,15 +4593,17 @@ function init() {
     id: "variables-import-listener",
     component: GlobalStylesImportListener
   });
-  injectIntoLogic({
-    id: "variables-open-panel-from-url",
-    component: OpenPanelFromUrl
-  });
-  injectIntoLogic({
-    id: "variables-open-panel-from-event",
-    component: OpenPanelFromEvent
-  });
-  registerPanel(panel);
+  if (!isExperimentActive2("e_editor_design_system_panel")) {
+    injectIntoLogic({
+      id: "variables-open-panel-from-url",
+      component: OpenPanelFromUrl
+    });
+    injectIntoLogic({
+      id: "variables-open-panel-from-event",
+      component: OpenPanelFromEvent
+    });
+    registerPanel(panel);
+  }
 }
 function hasVariableAssigned(value) {
   if (isTransformable2(value)) {
@@ -4480,6 +4633,7 @@ var Utils = {
 export {
   GLOBAL_VARIABLES_URI,
   Utils,
+  VariablesManagerPanelEmbedded,
   getMenuActionsForVariable,
   hasVariable,
   init,