chore: move ControlId type to the entities/Font layer

src/entities/Font/model/const/const.ts

@@ -1,5 +1,5 @@
 import type { ControlModel } from '$shared/lib';
-import type { ControlId } from '..';
+import type { ControlId } from '../types/typography';
 
 /**
  * Font size constants

src/entities/Font/model/index.ts

@@ -1,2 +1,3 @@
+export * from './const/const';
 export * from './store';
 export * from './types';

src/entities/Font/model/store/index.ts

@@ -1,5 +1,5 @@
 // Applied fonts manager
-export { appliedFontsManager } from './appliedFontsStore/appliedFontsStore.svelte';
+export * from './appliedFontsStore/appliedFontsStore.svelte';
 
 // Batch font store
 export { BatchFontStore } from './batchFontStore.svelte';

src/entities/Font/model/types/index.ts

@@ -33,3 +33,4 @@ export type {
 } from './store';
 
 export * from './store/appliedFonts';
+export * from './typography';

src/entities/Font/model/types/typography.ts

@@ -0,0 +1 @@
+export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';

src/entities/Font/ui/FontApplicator/FontApplicator.svelte

@@ -10,6 +10,7 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
 import { prefersReducedMotion } from 'svelte/motion';
 import {
+    DEFAULT_FONT_WEIGHT,
     type UnifiedFont,
     appliedFontsManager,
 } from '../../model';
@@ -36,7 +37,7 @@ interface Props {
 
 let {
     font,
-    weight = 400,
+    weight = DEFAULT_FONT_WEIGHT,
     className,
     children,
 }: Props = $props();

src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte

@@ -18,8 +18,8 @@ import {
     type FontLoadRequestConfig,
     type UnifiedFont,
     appliedFontsManager,
+    fontStore,
 } from '../../model';
-import { fontStore } from '../../model/store';
 
 interface Props extends
     Omit<
@@ -53,30 +53,42 @@ const isLoading = $derived(
     fontStore.isFetching || fontStore.isLoading,
 );
 
-function handleInternalVisibleChange(visibleItems: UnifiedFont[]) {
+let visibleFonts = $state<UnifiedFont[]>([]);
-    const configs: FontLoadRequestConfig[] = [];
-
-    visibleItems.forEach(item => {
-        const url = getFontUrl(item, weight);
-
-        if (url) {
-            configs.push({
-                id: item.id,
-                name: item.name,
-                weight,
-                url,
-                isVariable: item.features?.isVariable,
-            });
-        }
-    });
-
-    // Auto-register fonts with the manager
-    appliedFontsManager.touch(configs);
 
+function handleInternalVisibleChange(items: UnifiedFont[]) {
+    visibleFonts = items;
     // Forward the call to any external listener
-    // onVisibleItemsChange?.(visibleItems);
+    onVisibleItemsChange?.(items);
 }
 
+// Re-touch whenever visible set or weight changes — fixes weight-change gap
+$effect(() => {
+    const configs: FontLoadRequestConfig[] = visibleFonts.flatMap(item => {
+        const url = getFontUrl(item, weight);
+        if (!url) return [];
+        return [{ id: item.id, name: item.name, weight, url, isVariable: item.features?.isVariable }];
+    });
+    if (configs.length > 0) {
+        appliedFontsManager.touch(configs);
+    }
+});
+
+// Pin visible fonts so the eviction policy never removes on-screen entries.
+// Cleanup captures the snapshot values, so a weight change unpins the old
+// weight before pinning the new one.
+$effect(() => {
+    const w = weight;
+    const fonts = visibleFonts;
+    for (const f of fonts) {
+        appliedFontsManager.pin(f.id, w, f.features?.isVariable);
+    }
+    return () => {
+        for (const f of fonts) {
+            appliedFontsManager.unpin(f.id, w, f.features?.isVariable);
+        }
+    };
+});
+
 /**
  * Load more fonts by moving to the next page
  */

src/features/SetupFont/index.ts

@@ -1,28 +1,6 @@
-export { TypographyMenu } from './ui';
-
 export {
-    type ControlId,
+    createTypographySettingsManager,
-    controlManager,
+    type TypographySettingsManager,
-    DEFAULT_FONT_SIZE,
-    DEFAULT_FONT_WEIGHT,
-    DEFAULT_LETTER_SPACING,
-    DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    FONT_SIZE_STEP,
-    FONT_WEIGHT_STEP,
-    LINE_HEIGHT_STEP,
-    MAX_FONT_SIZE,
-    MAX_FONT_WEIGHT,
-    MAX_LINE_HEIGHT,
-    MIN_FONT_SIZE,
-    MIN_FONT_WEIGHT,
-    MIN_LINE_HEIGHT,
-    MULTIPLIER_L,
-    MULTIPLIER_M,
-    MULTIPLIER_S,
-} from './model';
-
-export {
-    createTypographyControlManager,
-    type TypographyControlManager,
 } from './lib';
+export { typographySettingsStore } from './model';
+export { TypographyMenu } from './ui';

src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts

@@ -10,6 +10,13 @@
  * when displaying/editing, but the base size is what's stored.
  */
 
+import {
+    type ControlId,
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+} from '$entities/Font';
 import {
     type ControlDataModel,
     type ControlModel,
@@ -19,13 +26,6 @@ import {
     createTypographyControl,
 } from '$shared/lib';
 import { SvelteMap } from 'svelte/reactivity';
-import {
-    type ControlId,
-    DEFAULT_FONT_SIZE,
-    DEFAULT_FONT_WEIGHT,
-    DEFAULT_LETTER_SPACING,
-    DEFAULT_LINE_HEIGHT,
-} from '../../model';
 
 type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, keyof ControlDataModel>;
 

src/features/SetupFont/lib/settingsManager/settingsManager.test.ts

@@ -1,4 +1,11 @@
 /** @vitest-environment jsdom */
+import {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+} from '$entities/Font';
 import {
     afterEach,
     beforeEach,
@@ -7,13 +14,6 @@ import {
     it,
     vi,
 } from 'vitest';
-import {
-    DEFAULT_FONT_SIZE,
-    DEFAULT_FONT_WEIGHT,
-    DEFAULT_LETTER_SPACING,
-    DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-} from '../../model';
 import {
     type TypographySettings,
     TypographySettingsManager,

src/features/SetupFont/model/index.ts

@@ -1,24 +1 @@
-export {
+export { typographySettingsStore } from './state/typographySettingsStore';
-    DEFAULT_FONT_SIZE,
-    DEFAULT_FONT_WEIGHT,
-    DEFAULT_LETTER_SPACING,
-    DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    FONT_SIZE_STEP,
-    FONT_WEIGHT_STEP,
-    LINE_HEIGHT_STEP,
-    MAX_FONT_SIZE,
-    MAX_FONT_WEIGHT,
-    MAX_LINE_HEIGHT,
-    MIN_FONT_SIZE,
-    MIN_FONT_WEIGHT,
-    MIN_LINE_HEIGHT,
-    MULTIPLIER_L,
-    MULTIPLIER_M,
-    MULTIPLIER_S,
-} from './const/const';
-
-export {
-    type ControlId,
-    typographySettingsStore,
-} from './state/typographySettingsStore';

src/features/SetupFont/model/state/typographySettingsStore.ts

@@ -1,7 +1,6 @@
+import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '$entities/Font';
 import { createTypographySettingsManager } from '../../lib';
-import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const';
 
-export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
 export const typographySettingsStore = createTypographySettingsManager(
     DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
     'glyphdiff:comparison:typography',

src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte

@@ -6,6 +6,11 @@
     Desktop: inline bar with combo controls.
 -->
 <script lang="ts">
+import {
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
+} from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
@@ -19,12 +24,7 @@ import { Popover } from 'bits-ui';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
-import {
+import { typographySettingsStore } from '../../model';
-    MULTIPLIER_L,
-    MULTIPLIER_M,
-    MULTIPLIER_S,
-    typographySettingsStore,
-} from '../../model';
 
 interface Props {
     /**

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

@@ -134,6 +134,19 @@ export class ComparisonStore {
                     });
                 }
             });
+
+            // Effect 4: Pin fontA/fontB so eviction never removes on-screen fonts
+            $effect(() => {
+                const fa = this.#fontA;
+                const fb = this.#fontB;
+                const w = typographySettingsStore.weight;
+                if (fa) appliedFontsManager.pin(fa.id, w, fa.features?.isVariable);
+                if (fb) appliedFontsManager.pin(fb.id, w, fb.features?.isVariable);
+                return () => {
+                    if (fa) appliedFontsManager.unpin(fa.id, w, fa.features?.isVariable);
+                    if (fb) appliedFontsManager.unpin(fb.id, w, fb.features?.isVariable);
+                };
+            });
         });
     }
 

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

@@ -53,15 +53,19 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
 
 // ── $entities/Font mock — keep real BatchFontStore, stub singletons ───────────
 
-vi.mock('$entities/Font', async () => {
+vi.mock('$entities/Font', async importOriginal => {
+    const actual = await importOriginal<typeof import('$entities/Font')>();
     const { BatchFontStore } = await import(
         '$entities/Font/model/store/batchFontStore.svelte'
     );
     return {
+        ...actual,
         BatchFontStore,
         fontStore: { fonts: [] },
         appliedFontsManager: {
             touch: vi.fn(),
+            pin: vi.fn(),
+            unpin: vi.fn(),
             getFontStatus: vi.fn(),
             ready: vi.fn(() => Promise.resolve()),
         },
@@ -80,9 +84,20 @@ vi.mock('$features/SetupFont', () => ({
     })),
 }));
 
+vi.mock('$features/SetupFont/model', () => ({
+    typographySettingsStore: {
+        weight: 400,
+        renderedSize: 48,
+        reset: vi.fn(),
+    },
+}));
+
 // ── Imports (after mocks) ─────────────────────────────────────────────────────
 
-import { fontStore } from '$entities/Font';
+import {
+    appliedFontsManager,
+    fontStore,
+} from '$entities/Font';
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
 import { ComparisonStore } from './comparisonStore.svelte';
 
@@ -209,4 +224,55 @@ describe('ComparisonStore', () => {
             expect(store.fontB).toBeUndefined();
         });
     });
+
+    // ── Pin / Unpin ───────────────────────────────────────────────────────────
+
+    describe('Pin / Unpin (eviction guard)', () => {
+        it('pins fontA and fontB when they are loaded', async () => {
+            mockStorage._value.fontAId = mockFontA.id;
+            mockStorage._value.fontBId = mockFontB.id;
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
+
+            new ComparisonStore();
+
+            await vi.waitFor(() => {
+                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                    mockFontA.id,
+                    400,
+                    mockFontA.features?.isVariable,
+                );
+                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                    mockFontB.id,
+                    400,
+                    mockFontB.features?.isVariable,
+                );
+            }, { timeout: 2000 });
+        });
+
+        it('unpins the old font when fontA is replaced', async () => {
+            mockStorage._value.fontAId = mockFontA.id;
+            mockStorage._value.fontBId = mockFontB.id;
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
+
+            const store = new ComparisonStore();
+            await vi.waitFor(() => expect(store.fontA?.id).toBe(mockFontA.id), { timeout: 2000 });
+
+            const mockFontC: typeof mockFontA = { ...mockFontA, id: 'playfair', name: 'Playfair Display' };
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontC, mockFontB]);
+            store.fontA = mockFontC;
+
+            await vi.waitFor(() => {
+                expect(appliedFontsManager.unpin).toHaveBeenCalledWith(
+                    mockFontA.id,
+                    400,
+                    mockFontA.features?.isVariable,
+                );
+                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                    mockFontC.id,
+                    400,
+                    mockFontC.features?.isVariable,
+                );
+            }, { timeout: 2000 });
+        });
+    });
 });

src/widgets/ComparisonView/ui/FontList/FontList.svelte

@@ -4,11 +4,11 @@
 -->
 <script lang="ts">
 import {
+    DEFAULT_FONT_WEIGHT,
     FontApplicator,
     FontVirtualList,
     type UnifiedFont,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/SetupFont';
 import {
     Button,
     Label,
@@ -19,8 +19,6 @@ import { crossfade } from 'svelte/transition';
 import { comparisonStore } from '../../model';
 
 const side = $derived(comparisonStore.side);
-const typography = $derived(typographySettingsStore);
-
 let prevIndexA: number | null = null;
 let prevIndexB: number | null = null;
 let selectedIndexA: number | null = null;
@@ -80,7 +78,7 @@ $effect(() => {
         </div>
         <FontVirtualList
             data-font-list
-            weight={typography.weight}
+            weight={DEFAULT_FONT_WEIGHT}
             itemHeight={45}
             class="bg-transparent min-h-0 h-full scroll-stable pr-4"
         >