Full app shell

This pattern mirrors how a real app wires Plumile packages together: global CSS first, then theme and notification providers, then Relay, then a router shell.

import { StrictMode, type JSX } from 'react';
import { ThemeProvider, ToastProvider } from '@plumile/ui';
import { RelayProvider } from '@plumile/backoffice-react';

import { RouterShell } from './RouterShell.js';

import '@plumile/ui/style.css';
import '@plumile/backoffice-react/style.css';

export function App(): JSX.Element {
  return (
    <StrictMode>
      <ThemeProvider>
        <ToastProvider>
          <RelayProvider>
            <RouterShell />
          </RelayProvider>
        </ToastProvider>
      </ThemeProvider>
    </StrictMode>
  );
}

Keep the router shell separate from the outer app shell. That lets it read the Relay environment, create router instrumentation, and clean up the router instance without mixing those concerns into global providers.

Next steps:

• Use Router app shell for the router implementation.
• Use App styling for CSS and vanilla-extract integration.
• Use Provider setup for a backoffice-specific shell.