nexarch/web/task-board/app/layout.tsx

import Script from "next/script";
import { ThemeProvider, I18nProvider, ToastProvider, typography, themeInitScript, focusVisibleStyles } from "@nexarch/shl";

export const metadata = {
  title: "NEXARCH Aufgaben",
};

const focusVisibleStyle = `
  :focus-visible {
    outline: 3px solid var(--shl-color-focus-ring, #1D4ED8);
    outline-offset: 2px;
  }
`;

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de">
      <head>
        <style>{focusVisibleStyles}</style>
        <Script id="shl-theme-init" strategy="beforeInteractive">
          {themeInitScript()}
        </Script>
      </head>
      <body
        style={{
          fontFamily: typography.fontFamily,
          margin: 0,
          background: "var(--shl-color-background, #ffffff)",
          color: "var(--shl-color-text-primary, #14181f)",
        }}
      >
        <style>{focusVisibleStyle}</style>
        <ThemeProvider>
          <I18nProvider initialLocale="de">
            <ToastProvider>{children}</ToastProvider>
          </I18nProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}