[Draft] Add support for popup (floating div) with toggleable docking mode

[emiljas-hexagon]

Summary

This draft PR introduces popup support to flex-layout.
A popup is a draggable and resizable div inside the page, not a browser window.

A "Toggle docking" button has been added to the popup tab bar:

• Floating mode → the popup behaves as a movable/resizable window
• Dockable mode → the popup can be dragged and docked into a fixed position within the layout

Current state

• Basic implementation of popup creation, dragging and resizing
• Toggle between floating and dockable modes is functional
• UI integration works but still needs refinement

Open questions / feedback requested

• Does the overall direction of this feature align with project goals?
• Is the API/UX for toggling between floating/dockable modes acceptable?
• Would maintainers be open to merging this feature once improved?

This PR is not ready to merge yet – the goal is to gather early feedback and validate whether this feature is a good fit for flex-layout.

flexlayout-popups.mp4

[powerdragonfire]

Absolutely incredible I love you for doing this!! Will give proper review, I'll merge into mine: https://github.com/powerdragonfire/flexycakes

Huge win!

[powerdragonfire]

@emiljas-hexagon Why I am merging:

Does the overall direction of this feature align with project goals?

Absolutely! I'd say the current popout logic is slightly dates to competitors. @caplin-releng mentions Dockview at the end of the ReadMe, which includes popout UX similar to what you have developed. It works well with dragging tabs from two different tabsets with its floating behaviour (which I also believe should capture some good, lost logic from v0.7, eg adding a new Tab to active tabset icon is arguably worse compared to the brilliance of v0.7).

Is the API/UX for toggling between floating/dockable modes acceptable?

This one is quite hard. On first look I think a mouse click is acceptable, however then changes a lot of logic with Icons that are popped out. For now, I think making the styling of the iframe header can be a bit clearer with if its docked/floating. Perhaps logic can be less complicated if we include a middle mouse click event capture - I think this could be up to the developer?

Would maintainers be open to merging this feature once improved?

Yes definitely willing to maintain this into flexycakes! Amazing work, thank you @emiljas-hexagon !

[powerdragonfire]

Issues with horizontal splitter - run playright tests

[powerdragonfire]

Check playright tests for splitter