The layout shell

A layout.tsx wraps every page with a sidebar + header — the chrome that makes it feel like an app.

Any PRISM folder can hold a layout.tsx that wraps the pages inside it. A layout at src/app/layout.tsx wraps the whole app — the right place for chrome that appears on every screen: the sidebar and header. The page being rendered arrives as children.

src/app/layout.tsx

export default function Layout({ children, route }) {
  return (
    <html lang="en">
      <head><style>{STYLES}</style></head>
      <body>
        <div className="app">
          <aside className="side">{/* sidebar */}</aside>
          <div className="main">
            <header className="hd" />
            <div className="ct">{children}</div>
          </div>
        </div>
      </body>
    </html>
  );
}

The styles live in a plain CSS string imported from ./styles and dropped into a <style> tag — no build step. Open src/app/layout.tsx in the file tree to see the full shell.

TIP

Because the layout owns the chrome, your pages stay tiny — they only render the content unique to that route. The preview now shows the shell wrapping the dashboard.