A modern building block for complex workspace layouts.

import { useState } from 'react';
import { DashboardProvider, PaneTree, Pane, DragHandle } from 'react-zeugma';

export default function App() {
  const [layout, setLayout] = useState({
    type: 'split',
    direction: 'row',
    splitPercentage: 25,
    first: { type: 'pane', paneId: 'sidebar' },
    second: {
      type: 'split',
      direction: 'column',
      splitPercentage: 70,
      first: { type: 'pane', paneId: 'editor' },
      second: { type: 'pane', paneId: 'terminal' }
    }
  });

  return (
    <DashboardProvider
      layout={layout}
      onChange={setLayout}
      renderPane={(id) => (
        <Pane id={id}>
          {({ remove }) => (
            <div className="pane">
              <DragHandle>
                <div className="title-bar">
                  <span>{id}</span>
                  <button onClick={remove}>×</button>
                </div>
              </DragHandle>
              <div className="pane-content">Content for {id}</div>
            </div>
          )}
        </Pane>
      )}
    >
      <PaneTree />
    </DashboardProvider>
  );
}