Add a JSON explorer for selecting binding paths

Problem

Bindings currently rely on text-based autocomplete. When a data source returns nested objects or arrays, users must know and type the exact path by hand, for example collection.data.result.name.

This is easy to get wrong and makes external data bindings harder to discover, especially for users who do not know the response shape in advance.

Desired result

Add a JSON explorer to the bindings UI. It should show the available data as a tree and let users select a path to a value.

Selecting a value should insert the correct binding path into the field.

Product scope

• Show objects and arrays as an expandable tree.
• Display property names and useful value types.
• Let users expand and collapse nested data.
• Let users select a value and insert its path.
• Support the data shapes used by connected resources and other bindings.
• Keep text entry and autocomplete available for users who prefer them.
• Show a useful empty or loading state when data is not available.
• Handle long or deeply nested responses without making the panel difficult to use.

Acceptance criteria

• A user can inspect a JSON response without manually copying its structure.
• A user can select a nested property and get the correct binding path.
• Arrays clearly show how their items can be selected.
• The inserted path works in the same binding field.
• The explorer does not expose secrets or unrelated response data beyond the existing binding context.
• Existing text-based bindings continue to work.

Related feedback

https://github.com/webstudio-is/webstudio/issues/6328