Function ResizablePanel

packages/editor-app/src/components/ResizablePanel.tsx:15–172

({
    direction,
    leftOrTop,
    rightOrBottom,
    defaultSize = 250,
    minSize = 150,
    maxSize = 600,
    side = 'left',
    storageKey
}: ResizablePanelProps)

}

export function ResizablePanel({
    direction,
    leftOrTop,
    rightOrBottom,
    defaultSize = 250,
    minSize = 150,
    maxSize = 600,
    side = 'left',
    storageKey
}: ResizablePanelProps) {
    const getInitialSize = () => {
        if (storageKey) {
            const saved = localStorage.getItem(storageKey);
            if (saved) {
                const parsedSize = parseInt(saved, 10);
                if (!isNaN(parsedSize)) {
                    return Math.max(minSize, Math.min(maxSize, parsedSize));
                }
            }
        }
        return defaultSize;
    };

    const [size, setSize] = useState(getInitialSize);
    const [isDragging, setIsDragging] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (storageKey && !isDragging) {
            localStorage.setItem(storageKey, size.toString());
        }
    }, [size, isDragging, storageKey]);

    useEffect(() => {
        if (!isDragging) return;

        const handleMouseMove = (e: MouseEvent) => {
            if (!containerRef.current) return;

            const rect = containerRef.current.getBoundingClientRect();
            let newSize: number;

            if (direction === 'horizontal') {
                if (side === 'right') {
                    newSize = rect.right - e.clientX;
                } else {
                    newSize = e.clientX - rect.left;
                }
            } else {
                if (side === 'bottom') {
                    newSize = rect.bottom - e.clientY;
                } else {
                    newSize = e.clientY - rect.top;
                }
            }

            newSize = Math.max(minSize, Math.min(maxSize, newSize));
            setSize(newSize);