Manage breakpoints & add viewports switcher

Problem/Motivation

Breakpoints is a design system artifact with YAML plugin discovery.

There are some in Core modules:

• toolbar.narrow
• toolbar.standard
• toolbar.wide
• responsive_image.viewport_sizing

But they are mostly found in themes:

• 7 breakpoints in Umami
• 8 breakpoints in Olivero
• 10 breakpoints in UI Suite Bootstrap
• 10 breakpoints in UI Suite USWDS
• 2 breakpoints in GCDS
• 6 breakpoints in Bootstrap
• ...

So, they need to be leverage by display builder, like we already do with Icons, SDC, Styles...

Proposed resolution

We can add a Viewport switcher, in Builder & Preview panels, using those breakpoints, like Chrome is doing:

Notes:

• Default value = no values = no breakpoint = fluid
• Zoom in/out is out of the scope of this issue (and not planned yet as a feature)
• Available breakpoints are configurable in the display builder profile (not in islands because they will be used in at least 2 islands): by default, all breakpoints from theme are enabled, all breakpoints from modules are disabled
• When switching viewport, the change is impacting all islands leveraging this mechanism
• We may need to use iframe HTML element in those islands, in order to let the browser recalculate the viewport dimension. Careful about performance issue and implementation complexity, especially related to HTMX.
• Do we also add a handler for free resizing?
• If no breakpoints plugins are found, do we hide the viewport switcher or do we provide a 2 default value switch?
• If no breakpoints are enabled, we hide the viewport switcher.

Let's keep the implementation as simple as possible. It it goes out of control, we can postpone it.