[feat] Naming Div – UI implementation

[Kitenite]

Describe the feature

Make div namable. Maybe it should write to code with a data attribute.

[drfarrell]

A mockup of the renaming UI. The dot is not a • but a · (from https://www.compart.com/en/unicode/U+00B7)

Some UI Notes of emphasis:

• The Input box should have a ring color when focused that matches the background color of the selected div layer. So, if it's a component, that would be purple, or red if it's a normal item.
• The Input box should extend all the way to the right edge of the element.
• The Input box should match the rounding of the parent layer div.
• The Tooltip of the layer div should have the · separating the name of the layer and the tag.
• The base of the Input box should be the darkest hue of the color of the parent div to create more visual separation.
• The selection color when the user double-clicks to edit the classname should match the hue of the parent div. The input cursor should also be the appropriate hue.

By default, every layer would have the layer tag

Note that the background of the input should be the darkest hue (950 I think) of the appropriate color, and the surrounding layer hue should be slightly adjusted to a darker hue to make the contrast between the layer background and the activated input stronger.

[drfarrell]

Also, it's obvious but, make the layer names persist if the project is reloaded.