Support user defined component labels by instance

[FedericoBonel]

Description

Follow-up from #730.

Currently, there is no way for users to customize the label of an individual component instance.

This is useful because when you have components that are used multiple times across the tree, the outline becomes more confusing than useful, since there is no easy way to tell each item apart. This also makes it easier to identify a selected component in the canvas.

Acceptance criteria

• A user should be able to edit the label of a component in:
  • The outline
  • The action bar
  • The last segment of the sidebar breadcrumbs
• The user-set label is used anywhere the component instance needs to be presented:
  • The outline items
  • The sidebar breadcrumbs
  • The action bar
• A user-set label takes precedence over any developer-provided or static component label.
• When no user-set label exists, the existing component label behavior remains unchanged.
• The label for each component instance is stored in a __puck object property in the component data, under __puck.label.
• The __puck property is removed from all components in the tree when passing data down to the Render component, before the components are actually rendered. This avoids polluting data sent to user pages when doing SSR.
• All colors are themable.
• All UI-presented strings are defined and overridable in the dictionary prop.

Could haves

• The outline could have a search bar to search components by their set labels. When a result is clicked, the corresponding component could be selected in the outline.

Proposal

1. Allow users to double-click the outline label to edit it.
2. Allow users to double-click the last segment of the sidebar breadcrumb to edit it.
3. Allow users to double-click the action bar label to edit it.

[fasenderos]

@FedericoBonel I've submitted a PR to address this issue. Please take a look when you have a chance. Thanks!