Resizable

pnpm dlx @hex-core/cli add resizable

<ResizablePanelGroup orientation="horizontal" className="min-h-[400px] rounded-lg border">
  <ResizablePanel defaultSize={20} minSize={15}>
    <div className="h-full p-4">
      <p className="text-sm font-medium">Sidebar</p>
      <p className="text-xs text-muted-foreground">Files, history, search</p>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={55} minSize={30}>
    <div className="h-full p-6">
      <p className="text-sm font-medium">Editor</p>
      <p className="text-xs text-muted-foreground">Document body</p>
    </div>
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={25} minSize={18}>
    <div className="h-full p-4">
      <p className="text-sm font-medium">Inspector</p>
      <p className="text-xs text-muted-foreground">Metadata, comments</p>
    </div>
  </ResizablePanel>
</ResizablePanelGroup>

import { useEffect, useState } from "react";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

type Layout = Record<string, number>;

const STORAGE_KEY = "docs:editor-layout";
const DEFAULT_LAYOUT: Layout = { files: 25, editor: 75 };

function isLayout(value: unknown): value is Layout {
  return (
    typeof value === "object" &&
    value !== null &&
    !Array.isArray(value) &&
    Object.values(value).every((n) => typeof n === "number" && Number.isFinite(n))
  );
}

export function PersistedSplit() {
  const [layout, setLayout] = useState<Layout>(DEFAULT_LAYOUT);

  useEffect(() => {
    try {
      const cached = window.localStorage.getItem(STORAGE_KEY);
      if (cached === null) return;
      const parsed: unknown = JSON.parse(cached);
      if (isLayout(parsed)) setLayout(parsed);
    } catch {
      // Storage corrupted — fall back to defaults; don't crash the editor.
    }
  }, []);

  return (
    <ResizablePanelGroup
      orientation="horizontal"
      defaultLayout={layout}
      onLayoutChanged={(next) => {
        // No setLayout — `defaultLayout` is an initial-only prop, so the panel
        // group owns the live size during drags. Persistence is one-way: write
        // on change, read on the next mount.
        try {
          window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
        } catch {
          // Quota exceeded — drop the persistence; the user's session keeps working.
        }
      }}
      className="min-h-[300px] rounded-lg border"
    >
      <ResizablePanel id="files" minSize={15}>
        <div className="flex h-full items-center justify-center p-6 text-sm">Files</div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel id="editor" minSize={30}>
        <div className="flex h-full items-center justify-center p-6 text-sm">Editor</div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}