puckeditor/puck ? reverse-engineered prompt

Build me a visual editor for a React application. I want a drag-and-drop page builder so that my team or users can create their own layouts without writing code.

It should have a main canvas area and a sidebar that lists all of our custom React components, like "Hero," "Button," or "TextBlock." A user should be able to drag these components onto the canvas to assemble a page. When a component is selected on the canvas, another panel should appear where they can edit its props, like changing the text or button link.

When someone clicks "Publish", the editor should save the page's layout and content as a data object. Then, I need a separate component that can take this data and render the final, public-facing page. Let's build this into a simple Next.js application to demonstrate how it all works.