Show HN: Puck 0.18 adds drag-and-drop for CSS grid and Flexbox

Hey HN!<p>I just released Puck 0.18 with a new drag-and-drop engine for CSS grid and flexbox support.<p>You can now use Puck to create a page builder that behaves like a design tool, but embedded within your own app and using your own React components.<p>To use it, just add `display: flex` (or grid, etc) to your DropZone and Puck will gracefully handle drag-and-drop across all dimensions.<p>Shout out to the dnd-kit maintainer Claudéric for the collaboration and support (if you’re reading this, I just sponsored you on GitHub!) and as always, a huge thanks to my wonderful community for all the testing and feedback. It would not be possible without you!<p>If you&#x27;ve not heard of Puck, it&#x27;s is an open-source visual editor for React that I maintain, available under MIT so you can safely embed it in your product.<p>Some background: This is the culmination of 18 months of iteration, and has required several breakthroughs in drag-and-drop to achieve: drag-and-drop across iframes, accounting for layout shift across nested components, and natural collision detection are some of the problems that have kept me extremely busy. I hope to write about the process if time allows.<p>The implementation is bleeding edge, using the experimental branch of dnd-kit with custom collision algorithms and plugins to implement a drag-and-drop experience that feels similar to react-beautiful-dnd, but across multiple dimensions.<p>Happy to answer any questions! Will endeavour to reply to everyone.