Recognize props passed to a component

[liady]

Problem:
Currently we don't show props in the "Variables" panel or the top bar.

Fix:
Identify which props were passed to the container and add them, allow inserting them.

If an element is selected inside "Playground" (which defines some props)

And <Playground> is being passed some real time values

We know to recognize those props are in the scope of the selected element and display them

[github-actions]

Try me

[relativeci]

Job #9556: Bundle Size — 66.23MiB (~+0.01%).

89acc3e(current) vs 5957b21 master#9554(baseline)

Warning

Bundle contains 67 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current Job #9556	Baseline Job #9554
Initial JS	48.36MiB(~+0.01%)	48.36MiB
Initial CSS	0B	0B
Cache Invalidation	20.22%	23.6%
Chunks	26	26
Assets	30	30
Modules	4490	4490
Duplicate Modules	480	480
Duplicate Code	30.37%	30.37%
Packages	466	466
Duplicate Packages	67	67

Bundle size by type   1 change 1 regression

	Current Job #9556	Baseline Job #9554
JS	66.22MiB (~+0.01%)	66.22MiB
HTML	11.32KiB	11.32KiB

---

View job #9556 report View feat/prop-vars branch activity

[github-actions]

Performance test results:

[Rheeseyb]

Please can you introduce a new type InsertableVariable (as mentioned in one of my comments) so that we can rely on the types to know that insertable variables have the required insert menu information (depth and original name) rather than having to rely on our knowledge about what should have been put in the Record (and then having to type check and cast that)