New data variables behavior

[TrySound]

Here's a few updates I'm gonna do to align data variables behavior with css variables. This change is essential for global variables and component parameters support.

• Variables with the same name are forbidden within the same instance.

  • Allowing multiple variables with the same name on the same instance can confuse users and lead to unexpected behavior.

• A variable with the same name on a child instance will mask the variable on the parent instance.

  • This is similar to CSS variables; a variable defined on a child will override the parent variable with the same name within the child’s scope. The parent variable becomes inaccessible in this scenario.

• An "unset" variable is created when an actual variable is removed.

  • Retaining the variable name ensures that expressions referencing the removed variable do not break. Expressions internally store references as obscure IDs.

• Adding a new variable with the same name as an "unset" variable will update expressions:

  • Any expressions referencing the "unset" variable will automatically begin referencing the newly created variable.

• Removing a variable on a child instance will update all expressions:

  • If a parent instance has a variable with the same name, expressions using the removed child variable will switch to reference the parent variable.
  • If no parent variable exists, the expressions will switch to "unset" variable.

• show inherited variables from ancestors in "Data Variables" section

• use orange and blue labels for variable names to distinct inherited and instance variables

• show only "inspect" option in inherited variable menu