What problem does this address?

We'd like to add more visual feedback on the canvas when using Gutenberg design tools. Here's an example of how the existing BoxControlVisualizer can be used to display padding on an element on the cavas:

Currently the BoxControlVisualizer is in an unusable state and is turned off. It's also tied closely with the BoxControl component. Some of the recently highlighted issues include:

• An issue caused by block attributes storing visualizer data: Padding UI can persist on save #31839
• An attempt to switch the visualizer to using state: Use state for dimensions visualizers #33560
• A comment from Riad regarding visualizers, switching them using popovers etc: Full Site Editing: Hovering block padding and margin inputs are registered as changes #36418 (comment)

What is your proposed solution?

I think we should:

• Extract the BoxControlVisualizer into its own component so we can convert to TypeScript, add tests, and develop and review it in isolation.
• Modify the visualizer so that it uses popover or :before :after styles so that we aren't adding a bunch of wrapper markup to the DOM to support it.
• Look at using state instead of block attributes to support the new component.
• Test this new visualizer component with a different design tool, perhaps block gap.