#3512455 New drag and drop overlay

#3512455

What does the MR do?

1. Drag and Drop no longer uses SortableJS and instead uses DnDKit.
2. Drag and Drop functionality has been fully re-written so that the drop targets are in the overlay, not injected into the iFrame document. https://www.drupal.org/project/experience_builder/issues/3508454
3. Slots that use display:grid; and display: flex; work correctly. https://www.drupal.org/project/experience_builder/issues/3509494
4. Dropping components into horizontally stacked slot containers (grid/flex) should now correctly display the indicator line vertically.
5. Regions no longer inject a div wrapper around them so the page layout should not break in the preview
6. Region spotlight is more accurate (but still not 100% working correctly)
7. New design for empty slots. Empty slot design is rendered in the overlay, not in the iFrame so should be more robust https://www.drupal.org/project/experience_builder/issues/3473761
8. New design for the Content region when it's empty. Empty region design is rendered in the overlay, not in the iFrame so should be more robust
9. On dragging, the parent slot or region border and name tag is shown to better indicate where the item will be dropped
10. The NameTag of a hovered component is always shown. The selected component will show its nametag only if another component isn't hovered.
11. Slots' NameTags are now displayed as "Slot Name (Parent Component Name)"
12. 🐛 Fixed: On dragging a new component to a region that is not the Content region, the URL loses the /region/{regionID} part
13. 🐛 Fixed: you can use the mouse scroll wheel while dragging https://www.drupal.org/project/experience_builder/issues/3470603
14. 🐛 Fixed: Slots that contain only text nodes render drop-zone when they should not https://www.drupal.org/project/experience_builder/issues/3515296
15. 🐛 Fixed: Dropping a component outside of the focused region https://www.drupal.org/project/experience_builder/issues/3502768
16. 🐛 Slightly improved zoom performance - see known issue 2. though.
17. 🐛 Fixed huge performance degradation when hovering on components when you have 50+ components and slots on the page.

What does this MR not do

1. SortableJS is still used for the Layers view
2. 🐛 Some Regions are still not correctly 'spotlighted' due to variations in how their template is configured https://www.drupal.org/project/experience_builder/issues/3502765
3. Solve the issue of a slot taking up 100% of the size of its container being difficult to drag/drop to
4. Solve selecting components that are stacked one inside the other and take up the same space
5. Enable hovering over and selecting regions from the preview https://www.drupal.org/project/experience_builder/issues/3502764
6. 🐛 Handle gracefully the user deleting the last component in a region other than the content region. In fact I think it may be a slightly worse compared to 0.x which already didn't handle it well. https://www.drupal.org/project/experience_builder/issues/3510439
7. 🐛 When using the right click/context menu on a nested component the name of its parent component is shown as you move the mouse around.
8. 🐛 Fix https://www.drupal.org/project/experience_builder/issues/3470612
9. Fully resolve https://www.drupal.org/project/experience_builder/issues/3499364 (comment annotations for regions) but it does partially address it
10. Work fully with astro-slots

Known issues

1. Dragging and moving the mouse first (especially when the browser is running slowly) will mis-position the drag overlay so it's not accurately centered on the mouse https://www.drupal.org/project/experience_builder/issues/3515836
2. Zooming is laggy https://www.drupal.org/project/experience_builder/issues/3515828
3. When there are a lot of components and slot on the page, the drag and drop gets laggy

What I would like this MR to do but I don't know how - (it could happen in a follow up)

When there are empty slots I am replacing the contents of them with a <div class="xb--sortable-slot-empty-placeholder"></div> in the JS. The CSS for it makes sure it's a minimum of 40px high. In the overlay, over this placeholder, I render the empty slot design. The issue is, because we are inserting this with JS, there is a layout shift every time the preview is updated. If this div could be rendered server side it would fix the layout shift. I'm not sure what the solution would be here for code components that are rendered by Astro.