feat: show inherited data variables (#4774)

Ref #4768

Here made a few changes to align data variables with css variables.

1. inherited variables are also shown in "Data Variables" section in
Settings
2. local and remote variables have blue and orange labels
3. local variables with the same name "mask" inherited variables in the
list
4. inherited variables can only be inspected

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/bf4648e6-b5fc-48cb-a6c3-a6d5e8b234cd"
/>

Author: TrySound

apps/builder/app/builder/features/settings-panel/variables-section.tsx

@@ -48,25 +48,30 @@ import {
 import {
   $selectedInstance,
   $selectedInstanceKey,
+  $selectedInstancePath,
   $selectedPage,
 } from "~/shared/awareness";
 
 /**
  * find variables defined specifically on this selected instance
  */
-const $instanceVariables = computed(
-  [$selectedInstance, $dataSources],
-  (instance, dataSources) => {
-    const matchedVariables: DataSource[] = [];
-    if (instance === undefined) {
-      return matchedVariables;
+const $availableVariables = computed(
+  [$selectedInstancePath, $dataSources],
+  (instancePath, dataSources) => {
+    if (instancePath === undefined) {
+      return [];
     }
-    for (const dataSource of dataSources.values()) {
-      if (instance.id === dataSource.scopeInstanceId) {
-        matchedVariables.push(dataSource);
+    const availableVariables = new Map<DataSource["name"], DataSource>();
+    // order from ancestor to descendant
+    // so descendants can override ancestor variables
+    for (const { instance } of instancePath.slice().reverse()) {
+      for (const dataSource of dataSources.values()) {
+        if (dataSource.scopeInstanceId === instance.id) {
+          availableVariables.set(dataSource.name, dataSource);
+        }
       }
     }
-    return matchedVariables;
+    return Array.from(availableVariables.values());
   }
 );
 
@@ -181,27 +186,33 @@ const EmptyVariables = () => {
 
 const VariablesItem = ({
   variable,
+  source,
   index,
   value,
   usageCount,
 }: {
   variable: DataSource;
+  source: "local" | "remote";
   index: number;
   value: unknown;
   usageCount: number;
 }) => {
-  const label =
-    value === undefined
-      ? variable.name
-      : `${variable.name}: ${formatValuePreview(value)}`;
+  const labelValue =
+    value === undefined ? "" : `: ${formatValuePreview(value)}`;
   const [inspectDialogOpen, setInspectDialogOpen] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   return (
     <VariablePopoverTrigger key={variable.id} variable={variable}>
       <CssValueListItem
         id={variable.id}
         index={index}
-        label={<Label truncate>{label}</Label>}
+        label={
+          <Flex align="center">
+            <Label color={source}>{variable.name}</Label>
+            {labelValue}
+          </Flex>
+        }
+        disabled={source === "remote"}
         data-state={isMenuOpen ? "open" : undefined}
         buttons={
           <>
@@ -234,13 +245,15 @@ const VariablesItem = ({
                   <DropdownMenuItem onSelect={() => setInspectDialogOpen(true)}>
                     Inspect
                   </DropdownMenuItem>
-                  <DropdownMenuItem
-                    // allow to delete only unused variables
-                    disabled={variable.type === "parameter" || usageCount > 0}
-                    onSelect={() => deleteVariable(variable.id)}
-                  >
-                    Delete {usageCount > 0 && `(${usageCount} bindings)`}
-                  </DropdownMenuItem>
+                  {source === "local" && (
+                    <DropdownMenuItem
+                      // allow to delete only unused variables
+                      disabled={variable.type === "parameter" || usageCount > 0}
+                      onSelect={() => deleteVariable(variable.id)}
+                    >
+                      Delete {usageCount > 0 && `(${usageCount} bindings)`}
+                    </DropdownMenuItem>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenuPortal>
             </DropdownMenu>
@@ -252,7 +265,8 @@ const VariablesItem = ({
 };
 
 const VariablesList = () => {
-  const availableVariables = useStore($instanceVariables);
+  const instance = useStore($selectedInstance);
+  const availableVariables = useStore($availableVariables);
   const variableValues = useStore($instanceVariableValues);
   const usedVariables = useStore($usedVariables);
 
@@ -262,18 +276,18 @@ const VariablesList = () => {
 
   return (
     <CssValueListArrowFocus>
-      {availableVariables.map((variable, index) => {
-        const value = variableValues.get(variable.id);
-        return (
-          <VariablesItem
-            key={variable.id}
-            value={value}
-            variable={variable}
-            index={index}
-            usageCount={usedVariables.get(variable.id) ?? 0}
-          />
-        );
-      })}
+      {availableVariables.map((variable, index) => (
+        <VariablesItem
+          key={variable.id}
+          source={
+            instance?.id === variable.scopeInstanceId ? "local" : "remote"
+          }
+          value={variableValues.get(variable.id)}
+          variable={variable}
+          index={index}
+          usageCount={usedVariables.get(variable.id) ?? 0}
+        />
+      ))}
     </CssValueListArrowFocus>
   );
 };

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

@@ -8,6 +8,7 @@ import {
   createContext,
   type ReactNode,
 } from "react";
+import { useStore } from "@nanostores/react";
 import {
   DotIcon,
   InfoCircleIcon,
@@ -47,7 +48,6 @@ import {
   $isDesignMode,
   computeExpression,
 } from "~/shared/nano-states";
-import { useStore } from "@nanostores/react";
 
 export const evaluateExpressionWithinScope = (
   expression: string,

apps/builder/app/shared/instance-utils.ts

@@ -1087,14 +1087,16 @@ export const insertWebstudioFragmentCopy = ({
         dataSources.set(newDataSourceId, {
           ...dataSource,
           id: newDataSourceId,
-          scopeInstanceId: newInstanceIds.get(scopeInstanceId),
+          scopeInstanceId:
+            newInstanceIds.get(scopeInstanceId) ?? scopeInstanceId,
           resourceId: newResourceId,
         });
       } else {
         dataSources.set(newDataSourceId, {
           ...dataSource,
           id: newDataSourceId,
-          scopeInstanceId: newInstanceIds.get(scopeInstanceId),
+          scopeInstanceId:
+            newInstanceIds.get(scopeInstanceId) ?? scopeInstanceId,
         });
       }
     }

apps/builder/app/shared/nano-states/props.test.ts

@@ -93,12 +93,14 @@ test("compute expression prop values", () => {
     toMap([
       {
         id: "var1",
+        scopeInstanceId: "box",
         type: "variable",
         name: "",
         value: { type: "number", value: 1 },
       },
       {
         id: "var2",
+        scopeInstanceId: "box",
         type: "variable",
         name: "",
         value: { type: "string", value: "Hello" },
@@ -162,6 +164,7 @@ test("generate action prop callbacks", () => {
     toMap([
       {
         id: "var",
+        scopeInstanceId: "box",
         type: "variable",
         name: "",
         value: { type: "number", value: 1 },
@@ -292,6 +295,7 @@ test("compute expression from collection items", () => {
     toMap([
       {
         id: "itemId",
+        scopeInstanceId: "list",
         type: "parameter",
         name: "item",
       },
@@ -362,6 +366,7 @@ test("access parameter value from variables values", () => {
     toMap([
       {
         id: "parameterId",
+        scopeInstanceId: "body",
         type: "parameter",
         name: "paramName",
       },
@@ -400,6 +405,7 @@ test("compute props bound to resource variables", () => {
     toMap([
       {
         id: "resourceVariableId",
+        scopeInstanceId: "body",
         type: "resource",
         name: "paramName",
         resourceId: "resourceId",

packages/design-system/src/components/css-value-list-item.tsx

@@ -180,7 +180,7 @@ export const CssValueListItem = forwardRef(
               {...listItemAttributes}
               {...rest}
               hidden={hidden}
-              disabled={hidden === true}
+              disabled={hidden === true || rest.disabled}
             >
               <DragHandleIconStyled />
 

packages/sdk/src/schema/data-sources.ts

@@ -30,20 +30,20 @@ export const DataSource = z.union([
   z.object({
     type: z.literal("variable"),
     id: DataSourceId,
-    scopeInstanceId: z.optional(z.string()),
+    scopeInstanceId: z.string(),
     name: z.string(),
     value: DataSourceVariableValue,
   }),
   z.object({
     type: z.literal("parameter"),
     id: DataSourceId,
-    scopeInstanceId: z.optional(z.string()),
+    scopeInstanceId: z.string(),
     name: z.string(),
   }),
   z.object({
     type: z.literal("resource"),
     id: DataSourceId,
-    scopeInstanceId: z.optional(z.string()),
+    scopeInstanceId: z.string(),
     name: z.string(),
     resourceId: z.string(),
   }),