feat: rebind masked variables (#4849)

Here improved creating variables to override deeper bindings when new
variable overrides ancestor variable similar to css variables behavior.

Here's a video with example



https://github.com/user-attachments/assets/41f93f5b-fd2d-4a3b-97d1-076f0ded5f01

Author: TrySound

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -59,7 +59,7 @@ import {
   $selectedPage,
 } from "~/shared/awareness";
 import { updateWebstudioData } from "~/shared/instance-utils";
-import { restoreTreeVariablesMutable } from "~/shared/data-variables";
+import { rebindTreeVariablesMutable } from "~/shared/data-variables";
 
 const validateUrl = (value: string, scope: Record<string, unknown>) => {
   const evaluatedValue = evaluateExpressionWithinScope(value, scope);
@@ -608,7 +608,7 @@ export const ResourceForm = forwardRef<
       updateWebstudioData((data) => {
         data.dataSources.set(newVariable.id, newVariable);
         data.resources.set(newResource.id, newResource);
-        restoreTreeVariablesMutable({ instancePath, ...data });
+        rebindTreeVariablesMutable({ instancePath, ...data });
       });
     },
   }));
@@ -740,7 +740,7 @@ export const SystemResourceForm = forwardRef<
       updateWebstudioData((data) => {
         data.dataSources.set(newVariable.id, newVariable);
         data.resources.set(newResource.id, newResource);
-        restoreTreeVariablesMutable({ instancePath, ...data });
+        rebindTreeVariablesMutable({ instancePath, ...data });
       });
     },
   }));
@@ -856,7 +856,7 @@ export const GraphqlResourceForm = forwardRef<
       updateWebstudioData((data) => {
         data.dataSources.set(newVariable.id, newVariable);
         data.resources.set(newResource.id, newResource);
-        restoreTreeVariablesMutable({ instancePath, ...data });
+        rebindTreeVariablesMutable({ instancePath, ...data });
       });
     },
   }));

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -75,7 +75,7 @@ import { generateCurl } from "./curl";
 import { updateWebstudioData } from "~/shared/instance-utils";
 import {
   findUnsetVariableNames,
-  restoreTreeVariablesMutable,
+  rebindTreeVariablesMutable,
 } from "~/shared/data-variables";
 
 const $variablesByName = computed(
@@ -299,7 +299,7 @@ const ParameterForm = forwardRef<
       const name = z.string().parse(formData.get("name"));
       updateWebstudioData((data) => {
         data.dataSources.set(variable.id, { ...variable, name });
-        restoreTreeVariablesMutable({ instancePath, ...data });
+        rebindTreeVariablesMutable({ instancePath, ...data });
       });
     },
   }));
@@ -339,7 +339,7 @@ const useValuePanelRef = ({
           type: "variable",
           value: variableValue,
         });
-        restoreTreeVariablesMutable({ instancePath, ...data });
+        rebindTreeVariablesMutable({ instancePath, ...data });
       });
     },
   }));

apps/builder/app/builder/shared/binding-popover.tsx

@@ -39,7 +39,10 @@ import {
   lintExpression,
 } from "@webstudio-is/sdk";
 import { $dataSourceVariables, $isDesignMode } from "~/shared/nano-states";
-import { computeExpression } from "~/shared/data-variables";
+import {
+  computeExpression,
+  encodeDataVariableName,
+} from "~/shared/data-variables";
 import {
   ExpressionEditor,
   formatValuePreview,
@@ -146,7 +149,10 @@ const BindingPanel = ({
                 active={usedIdentifiers.has(identifier)}
                 // convert variable to expression
                 onClick={() => {
-                  editorApiRef.current?.replaceSelection(identifier);
+                  if (name) {
+                    const nameIdentifier = encodeDataVariableName(name);
+                    editorApiRef.current?.replaceSelection(nameIdentifier);
+                  }
                 }}
                 // expression editor blur is fired after pointer down even
                 // preventing it allows to not trigger validation