refactor(typography): lazy getTypographySettingsStore + fix effect leak

Convert the eager typographySettingsStore singleton to getTypographySettingsStore()
(+ __resetTypographySettingsStore for tests) and update barrels and consumers
(TypographyMenu, FontSampler, SampleList, ComparisonView Line/SliderArea,
comparisonStore + its mock).

Fix a latent leak while here: the store ran $effect.root and discarded the
returned cleanup, so its storage-sync effects outlived every instance. Capture
the disposer and expose destroy(), which __reset now calls.

src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts

@@ -24,7 +24,10 @@ import {
     fontLifecycleManager,
     getFontCatalog,
 } from '$entities/Font/model';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
+import {
+    type TypographySettingsStore,
+    getTypographySettingsStore,
+} from '$features/AdjustTypography/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
@@ -101,11 +104,14 @@ export class ComparisonStore {
 
     #fontCatalog: FontCatalogStore;
 
+    #typography: TypographySettingsStore;
+
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
         const { fontAId, fontBId } = storage.value;
         this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
         this.#fontCatalog = getFontCatalog();
+        this.#typography = getTypographySettingsStore();
 
         $effect.root(() => {
             // Sync batch results → fontA / fontB
@@ -134,7 +140,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const weight = typographySettingsStore.weight;
+                const weight = this.#typography.weight;
 
                 if (!fa || !fb) {
                     return;
@@ -195,7 +201,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const w = typographySettingsStore.weight;
+                const w = this.#typography.weight;
                 if (fa) {
                     fontLifecycleManager.pin(fa.id, w, fa.features?.isVariable);
                 }
@@ -226,8 +232,8 @@ export class ComparisonStore {
             return;
         }
 
-        const weight = typographySettingsStore.weight;
-        const size = typographySettingsStore.renderedSize;
+        const weight = this.#typography.weight;
+        const size = this.#typography.renderedSize;
         const fontAName = this.#fontA?.name;
         const fontBName = this.#fontB?.name;
 
@@ -356,7 +362,7 @@ export class ComparisonStore {
         this.#fontB = undefined;
         this.#fontsByIdsStore.setIds([]);
         storage.clear();
-        typographySettingsStore.reset();
+        this.#typography.reset();
     }
 }
 

src/widgets/ComparisonView/model/stores/comparisonStore.test.ts

@@ -89,12 +89,14 @@ vi.mock('$features/AdjustTypography', () => ({
     })),
 }));
 
+const mockTypography = vi.hoisted(() => ({
+    weight: 400,
+    renderedSize: 48,
+    reset: vi.fn(),
+}));
+
 vi.mock('$features/AdjustTypography/model', () => ({
-    typographySettingsStore: {
-        weight: 400,
-        renderedSize: 48,
-        reset: vi.fn(),
-    },
+    getTypographySettingsStore: () => mockTypography,
 }));
 
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';

src/widgets/ComparisonView/ui/Line/Line.svelte

@@ -11,7 +11,7 @@ import {
     type ComparisonLine,
     computeLineRenderModel,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/AdjustTypography';
+import { getTypographySettingsStore } from '$features/AdjustTypography';
 import { getComparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 
@@ -36,7 +36,7 @@ const comparisonStore = getComparisonStore();
 
 const model = $derived(computeLineRenderModel(line, split, windowSize));
 
-const typography = $derived(typographySettingsStore);
+const typography = getTypographySettingsStore();
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -18,7 +18,7 @@ import {
     MULTIPLIER_M,
     MULTIPLIER_S,
     TypographyMenu,
-    typographySettingsStore,
+    getTypographySettingsStore,
 } from '$features/AdjustTypography';
 import {
     type ResponsiveManager,
@@ -81,7 +81,7 @@ const SLIDER_STEP_COARSE = 10;
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
-const typography = $derived(typographySettingsStore);
+const typography = getTypographySettingsStore();
 
 let container = $state<HTMLElement>();