apps/canvas/front/src/Canvas.tsx

import { Resources } from "./components/resources";
import { Canvas } from "./components/canvas";
import { Details } from "./Details";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
import { Tools } from "./Tools";
import { useStateStore } from "./lib/state";

export function CanvasBuilder() {
	const store = useStateStore();
	return (
		<ResizablePanelGroup direction="horizontal" className="w-full h-full">
			<ResizablePanel defaultSize={80}>
				<ResizablePanelGroup direction="vertical">
					<ResizablePanel defaultSize={80}>
						<ResizablePanelGroup direction="horizontal">
							{store.mode === "edit" && (
								<>
									<ResizablePanel defaultSize={15}>
										<Resources />
									</ResizablePanel>
									<ResizableHandle withHandle />
								</>
							)}
							<ResizablePanel defaultSize={store.mode === "edit" ? 85 : 100}>
								<Canvas />
							</ResizablePanel>
						</ResizablePanelGroup>
					</ResizablePanel>
					<ResizableHandle withHandle />
					<ResizablePanel defaultSize={20}>
						<Tools />
					</ResizablePanel>
				</ResizablePanelGroup>
			</ResizablePanel>
			<ResizableHandle withHandle />
			<ResizablePanel defaultSize={20} className="!overflow-y-auto !overflow-x-hidden">
				<Details />
			</ResizablePanel>
		</ResizablePanelGroup>
	);
}