I've created a draggable modal that persists across route changes in a Next.js application. Here's how it works:

1. Persistence Across Routes: The modal stays open when navigating between pages by storing its state in localStorage.
2. Draggable Functionality: You can drag the modal by its header, and it will remember its position even when you navigate to different pages.
3. Context-Based State Management: The ModalProvider component wraps the entire application, making the modal state accessible from any page.

4. Key Features:

   • Modal position is saved and restored
   • Modal state (open/closed) persists across navigation
   • Drag functionality with a visual indicator (cursor changes)
   • Clean UI with a header for dragging and a close button

To use this modal in your application:

1. Open the modal by clicking the "Open Persistent Modal" button on any page
2. Navigate between pages using the links in the header
3. Notice how the modal stays open and maintains its position
4. Close the modal by clicking the X button

This implementation uses Next.js App Router with client components where needed for interactivity. The modal can be styled further to match your design system.