frontend-svelte/src/app/ui/Layout.svelte

<!--
    Component: Layout
    Application shell with providers and page wrapper
-->
<script lang="ts">
import { themeManager } from '$features/ChangeAppTheme';
import G from '$shared/assets/G.svg';
import { ResponsiveProvider } from '$shared/lib';
import { cn } from '$shared/lib';
import { Footer } from '$widgets/Footer';

/*
    Preload the two render-critical interface faces (primary + secondary).
    `?url` resolves to the content-hashed path Vite emits, so the binary is
    fetched immediately rather than waiting for CSS @font-face discovery.
*/
import interWoff2 from '../assets/fonts/inter-latin-opsz-normal.woff2?url';
import spaceGroteskWoff2 from '../assets/fonts/space-grotesk-latin-wght-normal.woff2?url';

import {
    type Snippet,
    onDestroy,
    onMount,
} from 'svelte';

interface Props {
    /**
     * Content snippet
     */
    children: Snippet;
}

let { children }: Props = $props();
let fontsReady = $state(true);
const theme = $derived(themeManager.value);

onMount(() => themeManager.init());
onDestroy(() => themeManager.destroy());
</script>

<svelte:head>
    <link rel="icon" href={G} type="image/svg+xml" />

    <!-- Self-hosted interface fonts (see src/app/styles/fonts/fonts.css). Preload the two critical faces. -->
    <link
        rel="preload"
        as="font"
        type="font/woff2"
        href={interWoff2}
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        as="font"
        type="font/woff2"
        href={spaceGroteskWoff2}
        crossorigin="anonymous"
    />
    <title>GlyphDiff | Typography & Typefaces</title>
    <meta
        name="description"
        content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
    />
</svelte:head>

<ResponsiveProvider>
    <div
        id="app-root"
        class={cn(
            'min-h-dvh w-auto flex flex-col surface-canvas relative',
            theme === 'dark' ? 'dark' : '',
        )}
    >
        {#if fontsReady}
            {@render children?.()}
        {/if}

        <Footer />
    </div>
</ResponsiveProvider>