chore(app): update config, dependencies, storybook, and app shell

src/app/ui/Layout.svelte

@@ -1,3 +1,7 @@
+<!--
+    Component: Layout
+    Application shell with providers and page wrapper
+-->
 <script lang="ts">
 /**
  * Layout Component
@@ -11,13 +15,9 @@
  * - Footer area (currently empty, reserved for future use)
  */
 import { BreadcrumbHeader } from '$entities/Breadcrumb';
-import {
-    ThemeSwitch,
-    themeManager,
-} from '$features/ChangeAppTheme';
+import { themeManager } from '$features/ChangeAppTheme';
 import GD from '$shared/assets/GD.svg';
 import { ResponsiveProvider } from '$shared/lib';
-import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
@@ -27,36 +27,16 @@ import {
 } from 'svelte';
 
 interface Props {
+    /**
+     * Content snippet
+     */
     children: Snippet;
 }
 
 let { children }: Props = $props();
-let fontsReady = $state(false);
+let fontsReady = $state(true);
 const theme = $derived(themeManager.value);
 
-/**
- * Sets fontsReady flag to true when font for the page logo is loaded.
- */
-onMount(async () => {
-    if (!('fonts' in document)) {
-        fontsReady = true;
-        return;
-    }
-
-    const required = ['100'];
-
-    const missing = required.filter(
-        w => !document.fonts.check(`${w} 1em Barlow`),
-    );
-
-    if (missing.length > 0) {
-        await Promise.all(
-            missing.map(w => document.fonts.load(`${w} 1em Barlow`)),
-        );
-    }
-    fontsReady = true;
-});
-
 onMount(() => themeManager.init());
 onDestroy(() => themeManager.destroy());
 </script>
@@ -94,30 +74,29 @@ onDestroy(() => themeManager.destroy());
             href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
         />
     </noscript>
-    <title>Compare Typography & Typefaces | GlyphDiff</title>
+    <title>GlyphDiff | Typography & Typefaces</title>
 </svelte:head>
 
 <ResponsiveProvider>
     <div
         id="app-root"
         class={cn(
-            'min-h-screen flex flex-col bg-surface dark:bg-dark-bg',
+            'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg',
             theme === 'dark' ? 'dark' : '',
         )}
     >
         <header>
             <BreadcrumbHeader />
-            <ThemeSwitch />
         </header>
 
         <!-- <ScrollArea class="h-screen w-screen"> -->
-        <main class="flex-1 w-full mx-auto px-4 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative">
-            <TooltipProvider>
-                {#if fontsReady}
-                    {@render children?.()}
-                {/if}
-            </TooltipProvider>
-        </main>
+        <!-- <main class="flex-1 w-full mx-auto relative"> -->
+        <TooltipProvider>
+            {#if fontsReady}
+                {@render children?.()}
+            {/if}
+        </TooltipProvider>
+        <!-- </main> -->
         <!-- </ScrollArea> -->
         <footer></footer>
     </div>