ExoPane 🚀

ExoPane is a lightweight, high-performance React library for creating draggable, resizable, and "poppable" floating windows. Perfect for dashboards, multi-screen tools, and dynamic popups.

🤔 Why use ExoPane?

Standard web applications are often confined to a single browser tab. ExoPane breaks these boundaries by providing:

1. Exogenous Windows (Multi-Screen Support): The unique "Pop Out" feature allows users to move specific parts of your UI (like a chat, a video, or a log monitor) into real browser windows. This is a game-changer for users with multiple monitors.
2. Context Preservation: Users can continue navigating your main application while keeping a "popped out" window visible on another screen.
3. Desktop-Grade UX: Provides a familiar windowing environment (drag, resize, minimize, maximize) within your web app.
4. Information Density: Manage complex dashboards by organizing tools into floating panes rather than a single, cluttered page.

📦 Distribution & Updates

To ensure your users always have the latest version of ExoPane, you can distribute it via NPM or a CDN.

🌐 CDN (Recommended for Vanilla JS & Blazor)

Add these tags to your HTML to get the latest version automatically:

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/exopane@latest/dist/exopane.min.css">

<!-- Library -->
<script src="https://cdn.jsdelivr.net/npm/exopane@latest/dist/exopane.min.js"></script>

🛠️ NPM (Recommended for React)

npm install exopane

For detailed instructions on how to publish your own version of this library, see PUBLISH.md.

🔌 Multi-Framework Support

ExoPane is available in two editions:

• React Edition: Built with framer-motion for high-performance animations and React state management.
• Vanilla JS Edition: A zero-dependency implementation perfect for Blazor, Angular, Vue, or standard HTML/JS projects.

Using in Blazor

Check out BLAZOR_GUIDE.md for a full integration example using JS Interop.

Using in Vanilla JS

Check out VANILLA_JS_EXAMPLE.html for a standalone demo.

🚀 Quick Start

1. Installation

Ensure you have the required peer dependencies:

npm install motion lucide-react

2. Basic Usage

import ExoPane from './lib/exopane/ExoPane';

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="h-screen w-full bg-slate-900">
      {isOpen && (
        <ExoPane 
          id="my-window" 
          title="System Monitor"
          onClose={() => setIsOpen(false)}
        >
          <div className="p-4 text-white">
            <p>This is a floating window!</p>
          </div>
        </ExoPane>
      )}
    </div>
  );
}

📖 Documentation

For detailed integration steps and advanced usage, check out GUIDE.md.

🛠️ Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | id | string | Required | Unique ID for the window instance. | | title | string | Required | Title displayed in the header. | | children | ReactNode | Required | Content of the window. | | onClose | () => void | undefined | Callback when closed. | | initialPosition | {x, y} | {x: 100, y: 100} | Starting position. | | initialSize | {width, height} | {400, 300} | Starting dimensions. | | showPopOut | boolean | true | Show the "external window" button. | | className | string | ... | Custom Tailwind classes for container. | | headerClassName | string | ... | Custom Tailwind classes for header. |

Built with ❤️ for multi-screen productivity.