src/widgets/SampleList/model/index.ts

@@ -1,2 +1,2 @@
-export { layoutManager } from './stores';
+export { getLayoutManager } from './stores';
 export type { LayoutMode } from './stores';

src/widgets/SampleList/model/stores/index.ts

@@ -1,2 +1,2 @@
-export { layoutManager } from './layoutStore/layoutStore.svelte';
+export { getLayoutManager } from './layoutStore/layoutStore.svelte';
 export type { LayoutMode } from './layoutStore/layoutStore.svelte';

src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts

@@ -146,10 +146,20 @@ class LayoutManager {
     }
 }
 
+let _layoutManager: LayoutManager | undefined;
+
 /**
- * Singleton layout manager instance
+ * App-wide layout manager, created on first access. Lazy so its persisted
+ * layout preference isn't read at module load.
  */
-export const layoutManager = new LayoutManager();
+export function getLayoutManager(): LayoutManager {
+    return (_layoutManager ??= new LayoutManager());
+}
+
+// test-only reset, so specs don't share persisted layout state
+export function __resetLayoutManager() {
+    _layoutManager = undefined;
+}
 
 // Export class for testing purposes
 export { LayoutManager };

src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte

@@ -7,7 +7,7 @@ import { ButtonGroup } from '$shared/ui';
 import { IconButton } from '$shared/ui';
 import GridIcon from '@lucide/svelte/icons/layout-grid';
 import ListIcon from '@lucide/svelte/icons/stretch-horizontal';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 
 interface Props {
     /**
@@ -18,18 +18,21 @@ interface Props {
 
 const { class: className }: Props = $props();
 
+const layoutManager = getLayoutManager();
+const mode = $derived(layoutManager.mode);
+
 function handleClick() {
     layoutManager.toggleMode();
 }
 </script>
 
 <ButtonGroup class={className}>
-    <IconButton active={layoutManager.mode === 'list'} onclick={handleClick}>
+    <IconButton active={mode === 'list'} onclick={handleClick}>
         {#snippet icon()}
             <ListIcon class="size-4" />
         {/snippet}
     </IconButton>
-    <IconButton active={layoutManager.mode === 'grid'} onclick={handleClick}>
+    <IconButton active={mode === 'grid'} onclick={handleClick}>
         {#snippet icon()}
             <GridIcon class="size-4" />
         {/snippet}

src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts

@@ -4,14 +4,23 @@ import {
     screen,
     waitFor,
 } from '@testing-library/svelte';
-import { layoutManager } from '../../model';
+import { afterEach } from 'vitest';
+import { getLayoutManager } from '../../model';
+import { __resetLayoutManager } from '../../model/stores/layoutStore/layoutStore.svelte';
 import LayoutSwitch from './LayoutSwitch.svelte';
 
 describe('LayoutSwitch', () => {
+    let layoutManager: ReturnType<typeof getLayoutManager>;
+
     beforeEach(() => {
+        layoutManager = getLayoutManager();
         layoutManager.reset();
     });
 
+    afterEach(() => {
+        __resetLayoutManager();
+    });
+
     describe('Rendering', () => {
         it('renders two icon buttons', () => {
             render(LayoutSwitch);

src/widgets/SampleList/ui/SampleList/SampleList.svelte

@@ -20,11 +20,15 @@ import {
 import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 
 const fontCatalog = getFontCatalog();
 const typographySettingsStore = getTypographySettingsStore();
 const fontLifecycleManager = getFontLifecycleManager();
+const layoutManager = getLayoutManager();
+
+const columns = $derived(layoutManager.columns);
+const gap = $derived(layoutManager.gap);
 
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
@@ -114,8 +118,8 @@ const fontRowHeight = $derived.by(() =>
         itemHeight={fontRowHeight}
         useWindowScroll={true}
         weight={typographySettingsStore.weight}
-        columns={layoutManager.columns}
+        {columns}
-        gap={layoutManager.gap}
+        {gap}
         {skeleton}
     >
         {#snippet children({ item: font, index })}

src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte

@@ -12,7 +12,7 @@ import {
     Section,
 } from '$shared/ui';
 import { getContext } from 'svelte';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
 import SampleList from '../SampleList/SampleList.svelte';
 
@@ -29,6 +29,9 @@ const responsive = getContext<ResponsiveManager>('responsive');
 
 const fontCatalog = getFontCatalog();
 const total = $derived<number>(fontCatalog?.pagination?.total);
+
+const layoutManager = getLayoutManager();
+const mode = $derived(layoutManager.mode);
 </script>
 
 <NavigationWrapper index={2} title="Samples">
@@ -46,7 +49,7 @@ const total = $derived<number>(fontCatalog?.pagination?.total);
                 <div class="flex items-center gap-3 md:gap-4">
                     <div class="hidden md:flex items-center gap-2 mr-4">
                         <Label variant="muted" size="sm">view_mode: </Label>
-                        <Label variant="default" size="sm" bold>{layoutManager.mode}</Label>
+                        <Label variant="default" size="sm" bold>{mode}</Label>
                     </div>
                     <LayoutSwitch />
                 </div>