diff --git a/.storybook/ThemeDecorator.svelte b/.storybook/ThemeDecorator.svelte
index 0df30cb..bcf6731 100644
--- a/.storybook/ThemeDecorator.svelte
+++ b/.storybook/ThemeDecorator.svelte
@@ -2,9 +2,15 @@
     Component: ThemeDecorator
     Storybook decorator that initializes ThemeManager for theme-related stories.
     Ensures theme management works correctly in Storybook's iframe environment.
+    Includes a floating theme toggle for universal theme switching across all stories.
 -->
 <script lang="ts">
 import { themeManager } from '$features/ChangeAppTheme';
+import type { ResponsiveManager } from '$shared/lib';
+import { IconButton } from '$shared/ui';
+import MoonIcon from '@lucide/svelte/icons/moon';
+import SunIcon from '@lucide/svelte/icons/sun';
+import { getContext } from 'svelte';
 import {
     onDestroy,
     onMount,
@@ -16,15 +22,58 @@ interface Props {
 
 let { children }: Props = $props();
 
+// Get responsive context (set by Decorator)
+const responsive = getContext<ResponsiveManager>('responsive');
+
 // Initialize themeManager on mount
 onMount(() => {
     themeManager.init();
+
+    // Add keyboard shortcut for theme toggle (Cmd/Ctrl+Shift+D)
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'D') {
+            e.preventDefault();
+            themeManager.toggle();
+        }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+    };
 });
 
 // Clean up themeManager when story unmounts
 onDestroy(() => {
     themeManager.destroy();
 });
+
+const theme = $derived(themeManager.value);
+const themeLabel = $derived(theme === 'light' ? 'Light' : 'Dark');
 </script>
 
+<!-- Floating Theme Toggle -->
+<div
+    class="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-card border border-border shadow-lg rounded-lg"
+    title="Toggle theme (Cmd/Ctrl+Shift+D)"
+>
+    <span class="text-xs font-medium text-muted-foreground">Theme: {themeLabel}</span>
+    <IconButton
+        onclick={() => themeManager.toggle()}
+        size={responsive?.isMobile ? 'sm' : 'md'}
+        variant="ghost"
+        title="Toggle theme"
+    >
+        {#snippet icon()}
+            {#if theme === 'light'}
+                <MoonIcon class="size-4" />
+            {:else}
+                <SunIcon class="size-4" />
+            {/if}
+        {/snippet}
+    </IconButton>
+</div>
+
+<!-- Story Content -->
 {@render children()}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 281bb4e..4d8f256 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,11 +1,74 @@
 import type { Preview } from '@storybook/svelte-vite';
 import Decorator from './Decorator.svelte';
 import StoryStage from './StoryStage.svelte';
+import ThemeDecorator from './ThemeDecorator.svelte';
 import '../src/app/styles/app.css';
 
 const preview: Preview = {
+    globalTypes: {
+        viewport: {
+            description: 'Viewport size for responsive design',
+            defaultValue: 'widgetWide',
+            toolbar: {
+                icon: 'view',
+                items: [
+                    {
+                        value: 'reset',
+                        icon: 'refresh',
+                        title: 'Reset viewport',
+                    },
+                    {
+                        value: 'mobile1',
+                        icon: 'mobile',
+                        title: 'iPhone 5/SE',
+                    },
+                    {
+                        value: 'mobile2',
+                        icon: 'mobile',
+                        title: 'iPhone 14 Pro Max',
+                    },
+                    {
+                        value: 'tablet',
+                        icon: 'tablet',
+                        title: 'iPad (Portrait)',
+                    },
+                    {
+                        value: 'desktop',
+                        icon: 'desktop',
+                        title: 'Desktop (Small)',
+                    },
+                    {
+                        value: 'widgetMedium',
+                        icon: 'view',
+                        title: 'Widget Medium',
+                    },
+                    {
+                        value: 'widgetWide',
+                        icon: 'view',
+                        title: 'Widget Wide',
+                    },
+                    {
+                        value: 'widgetExtraWide',
+                        icon: 'view',
+                        title: 'Widget Extra Wide',
+                    },
+                    {
+                        value: 'fullWidth',
+                        icon: 'view',
+                        title: 'Full Width',
+                    },
+                    {
+                        value: 'fullScreen',
+                        icon: 'expand',
+                        title: 'Full Screen',
+                    },
+                ],
+                dynamicTitle: true,
+            },
+        },
+    },
     parameters: {
-        layout: 'fullscreen',
+        layout: 'padded',
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -23,7 +86,79 @@ const preview: Preview = {
         docs: {
             story: {
                 // This sets the default height for the iframe in Autodocs
-                iframeHeight: '400px',
+                iframeHeight: '600px',
+            },
+        },
+
+        viewport: {
+            viewports: {
+                // Mobile devices
+                mobile1: {
+                    name: 'iPhone 5/SE',
+                    styles: {
+                        width: '320px',
+                        height: '568px',
+                    },
+                },
+                mobile2: {
+                    name: 'iPhone 14 Pro Max',
+                    styles: {
+                        width: '414px',
+                        height: '896px',
+                    },
+                },
+                // Tablet
+                tablet: {
+                    name: 'iPad (Portrait)',
+                    styles: {
+                        width: '834px',
+                        height: '1112px',
+                    },
+                },
+                desktop: {
+                    name: 'Desktop (Small)',
+                    styles: {
+                        width: '1024px',
+                        height: '1280px',
+                    },
+                },
+                // Widget-specific viewports
+                widgetMedium: {
+                    name: 'Widget Medium',
+                    styles: {
+                        width: '768px',
+                        height: '800px',
+                    },
+                },
+                widgetWide: {
+                    name: 'Widget Wide',
+                    styles: {
+                        width: '1024px',
+                        height: '800px',
+                    },
+                },
+                widgetExtraWide: {
+                    name: 'Widget Extra Wide',
+                    styles: {
+                        width: '1280px',
+                        height: '800px',
+                    },
+                },
+                // Full-width viewports
+                fullWidth: {
+                    name: 'Full Width',
+                    styles: {
+                        width: '100%',
+                        height: '800px',
+                    },
+                },
+                fullScreen: {
+                    name: 'Full Screen',
+                    styles: {
+                        width: '100%',
+                        height: '100%',
+                    },
+                },
             },
         },
 
@@ -45,6 +180,13 @@ const preview: Preview = {
     },
 
     decorators: [
+        // Outermost: initialize ThemeManager for all stories
+        story => ({
+            Component: ThemeDecorator,
+            props: {
+                children: story(),
+            },
+        }),
         // Wrap with providers (TooltipProvider, ResponsiveManager)
         story => ({
             Component: Decorator,
diff --git a/package.json b/package.json
index c98f54b..3bdf137 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vaul-svelte": "^1.0.0-next.7",
     "vite": "^7.2.6",
     "vitest": "^4.0.16",
     "vitest-browser-svelte": "^2.0.1"
diff --git a/src/app/App.svelte b/src/app/App.svelte
index a4027c8..38a8bce 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -1,3 +1,7 @@
+<!--
+    Component: App
+    Application root with query provider and layout
+-->
 <script lang="ts">
 /**
  * App Component
diff --git a/src/app/providers/QueryProvider.svelte b/src/app/providers/QueryProvider.svelte
index 29c044a..8806e54 100644
--- a/src/app/providers/QueryProvider.svelte
+++ b/src/app/providers/QueryProvider.svelte
@@ -11,6 +11,9 @@ import { QueryClientProvider } from '@tanstack/svelte-query';
 import type { Snippet } from 'svelte';
 
 interface Props {
+    /**
+     * Content snippet
+     */
     children?: Snippet;
 }
 
diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index e981773..60e21a4 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -306,81 +306,72 @@
     animation: nudge 10s ease-in-out infinite;
 }
 
-* {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(0 0% 70% / 0.4) transparent;
+/* ============================================
+   SCROLLBAR STYLES
+   ============================================ */
+
+/* ---- Modern API: color + width (Chrome 121+, FF 64+) ---- */
+@supports (scrollbar-width: auto) {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: hsl(0 0% 70% / 0.4) var(--color-surface);
+    }
+
+    .dark * {
+        scrollbar-color: hsl(0 0% 40% / 0.5) var(--color-surface);
+    }
 }
 
-.dark * {
-    scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
+/* ---- Webkit layer: runs ON TOP in Chrome, standalone in old Safari ---- */
+/* Handles things scrollbar-width can't: hiding buttons, exact sizing    */
+@supports selector(::-webkit-scrollbar) {
+    ::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+    }
+
+    ::-webkit-scrollbar-button {
+        display: none;  /* kills arrows */
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--color-surface);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: hsl(0 0% 70% / 0.4);
+        border-radius: 3px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: hsl(0 0% 50% / 0.6);
+    }
+
+    ::-webkit-scrollbar-thumb:active {
+        background: hsl(0 0% 40% / 0.8);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: var(--color-surface);
+    }
+
+    .dark ::-webkit-scrollbar-thumb        { background: hsl(0 0% 40% / 0.5); }
+    .dark ::-webkit-scrollbar-thumb:hover  { background: hsl(0 0% 55% / 0.6); }
+    .dark ::-webkit-scrollbar-thumb:active { background: hsl(0 0% 65% / 0.7); }
 }
 
-/* ---- Webkit / Blink ---- */
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 70% / 0);
-    border-radius: 3px;
-    transition: background 0.2s ease;
-}
-
-/* Show thumb when container is hovered or actively scrolling */
-:hover > ::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:hover,
-*:hover::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 70% / 0.4);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: hsl(0 0% 50% / 0.6);
-}
-
-::-webkit-scrollbar-thumb:active {
-    background: hsl(0 0% 40% / 0.8);
-}
-
-::-webkit-scrollbar-corner {
-    background: transparent;
-}
-
-/* Dark mode */
-.dark ::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 40% / 0);
-}
-
-.dark :hover > ::-webkit-scrollbar-thumb,
-.dark ::-webkit-scrollbar-thumb:hover,
-.dark *:hover::-webkit-scrollbar-thumb {
-    background: hsl(0 0% 40% / 0.5);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-    background: hsl(0 0% 55% / 0.6);
-}
-
-.dark ::-webkit-scrollbar-thumb:active {
-    background: hsl(0 0% 65% / 0.7);
-}
-
-/* ---- Behavior ---- */
-* {
+html {
     scroll-behavior: smooth;
-    scrollbar-gutter: stable;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
+    html { scroll-behavior: auto; }
 }
 
 body {
     overscroll-behavior-y: none;
 }
+
+.scroll-stable {
+    scrollbar-gutter: stable;
+}
diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 1bfbcac..c430a3f 100644
--- a/src/app/ui/Layout.svelte
+++ b/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>
diff --git a/src/routes/Page.svelte b/src/routes/Page.svelte
index 2343abf..19c108d 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Page.svelte
@@ -4,149 +4,22 @@
 -->
 <script lang="ts">
 import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
-import type { ResponsiveManager } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    Logo,
-    Section,
-} from '$shared/ui';
-import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
-import { FontSearch } from '$widgets/FontSearch';
-import { SampleList } from '$widgets/SampleList';
-import CodeIcon from '@lucide/svelte/icons/code';
-import EyeIcon from '@lucide/svelte/icons/eye';
-import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
-import ScanSearchIcon from '@lucide/svelte/icons/search';
-import {
-    type Snippet,
-    getContext,
-} from 'svelte';
+import { ComparisonView } from '$widgets/ComparisonView';
+import { FontSearchSection } from '$widgets/FontSearch';
+import { SampleListSection } from '$widgets/SampleList';
 import { cubicIn } from 'svelte/easing';
 import { fade } from 'svelte/transition';
-
-let searchContainer: HTMLElement;
-
-let isExpanded = $state(true);
-const responsive = getContext<ResponsiveManager>('responsive');
-
-function handleTitleStatusChanged(
-    index: number,
-    isPast: boolean,
-    title?: Snippet<[{ className?: string }]>,
-    id?: string,
-) {
-    if (isPast && title) {
-        scrollBreadcrumbsStore.add({ index, title, id });
-    } else {
-        scrollBreadcrumbsStore.remove(index);
-    }
-
-    return () => {
-        scrollBreadcrumbsStore.remove(index);
-    };
-}
 </script>
 
-<!-- Font List -->
 <div
-    class="p-2 sm:p-3 md:p-4 h-full grid gap-3 sm:gap-4 grid-cols-[max-content_1fr]"
+    class="h-full flex flex-col gap-3 sm:gap-4"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-8"
-        onTitleStatusChange={handleTitleStatusChanged}
-    >
-        {#snippet icon({ className })}
-            <CodeIcon class={className} />
-        {/snippet}
-        {#snippet description({ className })}
-            <span class={className}> Project_Codename </span>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, 'col-start-0 col-span-2')}>
-                <Logo />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={1}
-        id="optical_comparator"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <EyeIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h1 class={className}>
-                Optical<br />Comparator
-            </h1>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <ComparisonSlider />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={2}
-        id="query_module"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <ScanSearchIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h2 class={className}>
-                Query<br />Module
-            </h2>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <FontSearch bind:showFilters={isExpanded} />
-            </div>
-        {/snippet}
-    </Section>
-
-    <Section
-        class="py-4 sm:py-10 md:py-12 gap-6 sm:gap-x-12 sm:gap-y-8"
-        index={3}
-        id="sample_set"
-        onTitleStatusChange={handleTitleStatusChanged}
-        stickyTitle={responsive.isDesktopLarge}
-        stickyOffset="4rem"
-    >
-        {#snippet icon({ className })}
-            <LineSquiggleIcon class={className} />
-        {/snippet}
-        {#snippet title({ className })}
-            <h2 class={className}>
-                Sample<br />Set
-            </h2>
-        {/snippet}
-        {#snippet content({ className })}
-            <div class={cn(className, !responsive.isDesktopLarge && 'col-start-0 col-span-2')}>
-                <SampleList />
-            </div>
-        {/snippet}
-    </Section>
+    <section class="w-auto">
+        <ComparisonView />
+    </section>
+    <main class="w-full pt-0 pb-10 sm:px-6 sm:pt-16 sm:pb-12 md:px-8 md:pt-32 md:pb-16 lg:px-10 lg:pt-48 lg:pb-20 xl:px-16">
+        <FontSearchSection />
+        <SampleListSection index={1} />
+    </main>
 </div>
-
-<style>
-.content {
-  /* Tells the browser to skip rendering off-screen content */
-  content-visibility: auto;
-  /* Helps the browser reserve space without calculating everything */
-  contain-intrinsic-size: 1px 1000px;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</style>
diff --git a/vitest.config.ts b/vitest.config.ts
index d65fb1a..b14ba67 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -48,7 +48,7 @@ export default defineConfig({
                 statements: 70,
             },
         },
-        setupFiles: [],
+        setupFiles: ['./vitest.setup.unit.ts'],
         globals: false,
     },
 
diff --git a/vitest.setup.unit.ts b/vitest.setup.unit.ts
new file mode 100644
index 0000000..7a3966f
--- /dev/null
+++ b/vitest.setup.unit.ts
@@ -0,0 +1,83 @@
+/**
+ * Setup file for unit tests
+ *
+ * This file runs before all unit tests to set up global mocks
+ * that are needed before any module imports.
+ *
+ * IMPORTANT: This runs in Node environment BEFORE jsdom is initialized
+ * for test files that use @vitest-environment jsdom.
+ */
+
+import { vi } from 'vitest';
+
+// Create a storage map that persists through the test session
+// This is used for the localStorage mock
+// We make it global so tests can clear it
+(globalThis as any).__testStorageMap = new Map<string, string>();
+
+// Mock ResizeObserver for tests that import modules using responsiveManager
+// This must be done at setup time because the responsiveManager singleton
+// is instantiated when the module is first imported
+globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+} as any;
+
+// Mock MediaQueryListEvent for tests that need to simulate system theme changes
+// @ts-expect-error - Mocking a DOM API
+globalThis.MediaQueryListEvent = class MediaQueryListEvent extends Event {
+    matches: boolean;
+    media: string;
+
+    constructor(type: string, eventInitDict: { matches: boolean; media: string }) {
+        super(type);
+        this.matches = eventInitDict.matches;
+        this.media = eventInitDict.media;
+    }
+};
+
+// Mock window.matchMedia for tests that import modules using media queries
+// Some modules (like createPerspectiveManager) use matchMedia during import
+Object.defineProperty(globalThis, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+
+// Mock localStorage for tests that use it during module import
+// Some modules (like ThemeManager via createPersistentStore) access localStorage during initialization
+// This MUST be a fully functional mock since it's used during module load
+const getStorageMap = () => (globalThis as any).__testStorageMap;
+
+Object.defineProperty(globalThis, 'localStorage', {
+    writable: true,
+    value: {
+        get length() {
+            return getStorageMap().size;
+        },
+        clear() {
+            getStorageMap().clear();
+        },
+        getItem(key: string) {
+            return getStorageMap().get(key) ?? null;
+        },
+        setItem(key: string, value: string) {
+            getStorageMap().set(key, value);
+        },
+        removeItem(key: string) {
+            getStorageMap().delete(key);
+        },
+        key(index: number) {
+            return Array.from(getStorageMap().keys())[index] ?? null;
+        },
+    },
+});
diff --git a/yarn.lock b/yarn.lock
index 84894cd..e1f0e72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2470,7 +2470,6 @@ __metadata:
     tailwindcss: "npm:^4.1.18"
     tw-animate-css: "npm:^1.4.0"
     typescript: "npm:^5.9.3"
-    vaul-svelte: "npm:^1.0.0-next.7"
     vite: "npm:^7.2.6"
     vitest: "npm:^4.0.16"
     vitest-browser-svelte: "npm:^2.0.1"
@@ -3626,17 +3625,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"runed@npm:^0.23.2":
-  version: 0.23.4
-  resolution: "runed@npm:0.23.4"
-  dependencies:
-    esm-env: "npm:^1.0.0"
-  peerDependencies:
-    svelte: ^5.7.0
-  checksum: 10c0/e27400af9e69b966dca449b851e82e09b3d2ddde4095ba72237599aa80fc248a23d0737c0286f751ca6c12721a5e09eb21b9d8cc872cbd70e7b161442818eece
-  languageName: node
-  linkType: hard
-
 "runed@npm:^0.35.1":
   version: 0.35.1
   resolution: "runed@npm:0.35.1"
@@ -3920,19 +3908,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-toolbelt@npm:^0.7.1":
-  version: 0.7.1
-  resolution: "svelte-toolbelt@npm:0.7.1"
-  dependencies:
-    clsx: "npm:^2.1.1"
-    runed: "npm:^0.23.2"
-    style-to-object: "npm:^1.0.8"
-  peerDependencies:
-    svelte: ^5.0.0
-  checksum: 10c0/a50db97c851fa65af7fbf77007bd76730a179ac0239c0121301bd26682c1078a4ffea77835492550b133849a42d3dffee0714ae076154d86be8d0b3a84c9a9bf
-  languageName: node
-  linkType: hard
-
 "svelte2tsx@npm:^0.7.44, svelte2tsx@npm:~0.7.46":
   version: 0.7.46
   resolution: "svelte2tsx@npm:0.7.46"
@@ -4257,18 +4232,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vaul-svelte@npm:^1.0.0-next.7":
-  version: 1.0.0-next.7
-  resolution: "vaul-svelte@npm:1.0.0-next.7"
-  dependencies:
-    runed: "npm:^0.23.2"
-    svelte-toolbelt: "npm:^0.7.1"
-  peerDependencies:
-    svelte: ^5.0.0
-  checksum: 10c0/7a459122b39c9ef6bd830b525d5f6acbc07575491e05c758d9dfdb993cc98ab4dee4a9c022e475760faaf1d7bd8460a1434965431d36885a3ee48315ffa54eb3
-  languageName: node
-  linkType: hard
-
 "vite@npm:^6.0.0 || ^7.0.0, vite@npm:^7.2.6":
   version: 7.3.0
   resolution: "vite@npm:7.3.0"