Docking layouts

import { DockLayout, DockTab, type DockNode } from "@gpuixui/dock";
import { useState } from "react";

const initial: DockNode = {
  kind: "split",
  id: "root",
  orientation: "horizontal",
  size: 0.6,
  first: {
    kind: "tabs",
    id: "editor",
    activeTab: "code",
    tabs: [new DockTab({ id: "code", label: "Code" })],
  },
  second: {
    kind: "tabs",
    id: "preview",
    activeTab: "outline",
    tabs: [new DockTab({ id: "outline", label: "Outline" })],
  },
};

const [layout, setLayout] = useState(initial);

<DockLayout
  layout={layout}
  onLayoutChange={setLayout}
  renderTab={(id) => <Pane id={id} />}
/>;