Function AppShell

apps/react/src/App.tsx:109–144

({
    activeView,
    onSelectView,
}: {
    activeView: AppView;
    onSelectView: (view: AppView) => void;
})

}

function AppShell({
    activeView,
    onSelectView,
}: {
    activeView: AppView;
    onSelectView: (view: AppView) => void;
}) {
    const scrollTargetRef = useRef<HTMLDivElement | null>(null);

    return (
        <div className="flex h-dvh min-h-0 flex-col overflow-hidden bg-app-bg text-theme-text-strong">
            <ScrollArea
                ref={scrollTargetRef}
                axis="y"
                className="min-h-0 flex-1"
            >
                <ShellHeader
                    activeView={activeView}
                    onSelectView={onSelectView}
                    scrollTargetRef={scrollTargetRef}
                />
                <main className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-4 py-8 sm:px-6 sm:py-10">
                    {activeView === "primitives" ? (
                        <PrimitivesPage />
                    ) : activeView === "compositions" ? (
                        <CompositionsPage />
                    ) : activeView === "modules" ? (
                        <ModulesPage />
                    ) : activeView === "colors" ? (
                        <ColorsPage />
                    ) : null}
                </main>
            </ScrollArea>
        </div>
    );
}

function DebugShowcase({
    activeView,