refactor: tailwind tier 1 — border-subtle/text-secondary/focus-ring utilities + Input config extraction

Reviewed-on: #36

src/app/styles/app.css

@@ -265,6 +265,21 @@
   }
 }
 
+@layer utilities {
+  /* 21× border-black/5 dark:border-white/10 → single token */
+  .border-subtle {
+    @apply border-black/5 dark:border-white/10;
+  }
+  /* Secondary text pair */
+  .text-secondary {
+    @apply text-neutral-500 dark:text-neutral-400;
+  }
+  /* Standard focus ring */
+  .focus-ring {
+    @apply focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2;
+  }
+}
+
 /* Global utility - useful across your app */
 @media (prefers-reduced-motion: reduce) {
     * {

src/app/ui/Layout.svelte

@@ -85,19 +85,11 @@ onDestroy(() => themeManager.destroy());
             theme === 'dark' ? 'dark' : '',
         )}
     >
-        <header>
-            <BreadcrumbHeader />
-        </header>
-
-        <!-- <ScrollArea class="h-screen w-screen"> -->
-        <!-- <main class="flex-1 w-full mx-auto relative"> -->
         <TooltipProvider>
             {#if fontsReady}
                 {@render children?.()}
             {/if}
         </TooltipProvider>
-        <!-- </main> -->
-        <!-- </ScrollArea> -->
         <footer></footer>
     </div>
 </ResponsiveProvider>

src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte

@@ -44,7 +44,7 @@ function createButtonText(item: BreadcrumbItem) {
             flex items-center justify-between
             z-40
             bg-surface/90 dark:bg-dark-bg/90 backdrop-blur-md
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
         "
     >
         <div class="max-w-8xl px-4 sm:px-6 h-full w-full flex items-center justify-between gap-2 sm:gap-4">

src/entities/Font/api/proxy/proxyFonts.test.ts

@@ -19,10 +19,13 @@ vi.mock('$shared/api/api', () => ({
 }));
 
 import { api } from '$shared/api/api';
+import { queryClient } from '$shared/api/queryClient';
+import { fontKeys } from '$shared/api/queryKeys';
 import {
     fetchFontsByIds,
     fetchProxyFontById,
     fetchProxyFonts,
+    seedFontCache,
 } from './proxyFonts';
 
 const PROXY_API_URL = 'https://api.glyphdiff.com/api/v1/fonts';
@@ -46,6 +49,7 @@ function mockApiGet<T>(data: T) {
 describe('proxyFonts', () => {
     beforeEach(() => {
         vi.mocked(api.get).mockReset();
+        queryClient.clear();
     });
 
     describe('fetchProxyFonts', () => {
@@ -168,4 +172,33 @@ describe('proxyFonts', () => {
             expect(result).toEqual([]);
         });
     });
+
+    describe('seedFontCache', () => {
+        test('should populate cache with multiple fonts', () => {
+            const fonts = [
+                createMockFont({ id: '1', name: 'A' }),
+                createMockFont({ id: '2', name: 'B' }),
+            ];
+            seedFontCache(fonts);
+            expect(queryClient.getQueryData(fontKeys.detail('1'))).toEqual(fonts[0]);
+            expect(queryClient.getQueryData(fontKeys.detail('2'))).toEqual(fonts[1]);
+        });
+
+        test('should update existing cached fonts with new data', () => {
+            const id = 'update-me';
+            queryClient.setQueryData(fontKeys.detail(id), createMockFont({ id, name: 'Old' }));
+
+            const updated = createMockFont({ id, name: 'New' });
+            seedFontCache([updated]);
+
+            expect(queryClient.getQueryData(fontKeys.detail(id))).toEqual(updated);
+        });
+
+        test('should handle empty input arrays gracefully', () => {
+            const spy = vi.spyOn(queryClient, 'setQueryData');
+            seedFontCache([]);
+            expect(spy).not.toHaveBeenCalled();
+            spy.mockRestore();
+        });
+    });
 });

src/entities/Font/api/proxy/proxyFonts.ts

@@ -11,13 +11,23 @@
  */
 
 import { api } from '$shared/api/api';
+import { queryClient } from '$shared/api/queryClient';
+import { fontKeys } from '$shared/api/queryKeys';
 import { buildQueryString } from '$shared/lib/utils';
 import type { QueryParams } from '$shared/lib/utils';
 import type { UnifiedFont } from '../../model/types';
-import type {
-    FontCategory,
-    FontSubset,
-} from '../../model/types';
+
+/**
+ * Normalizes cache by seeding individual font entries from collection responses.
+ * This ensures that a font fetched in a list or batch is available via its detail key.
+ *
+ * @param fonts - Array of fonts to cache
+ */
+export function seedFontCache(fonts: UnifiedFont[]): void {
+    fonts.forEach(font => {
+        queryClient.setQueryData(fontKeys.detail(font.id), font);
+    });
+}
 
 /**
  * Proxy API base URL

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,7 +1,3 @@
-export {
-    appliedFontsManager,
-    createFontStore,
-    FontStore,
-    fontStore,
-} from './store';
+export * from './const/const';
+export * from './store';
 export * from './types';

src/entities/Font/model/store/batchFontStore.svelte.ts

@@ -0,0 +1,91 @@
+import { fontKeys } from '$shared/api/queryKeys';
+import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore.svelte';
+import {
+    fetchFontsByIds,
+    seedFontCache,
+} from '../../api/proxy/proxyFonts';
+import {
+    FontNetworkError,
+    FontResponseError,
+} from '../../lib/errors/errors';
+import type { UnifiedFont } from '../../model/types';
+
+/**
+ * Internal fetcher that seeds the cache and handles error wrapping.
+ * Standalone function to avoid 'this' issues during construction.
+ */
+async function fetchAndSeed(ids: string[]): Promise<UnifiedFont[]> {
+    if (ids.length === 0) return [];
+
+    let response: UnifiedFont[];
+    try {
+        response = await fetchFontsByIds(ids);
+    } catch (cause) {
+        throw new FontNetworkError(cause);
+    }
+
+    if (!response || !Array.isArray(response)) {
+        throw new FontResponseError('batchResponse', response);
+    }
+
+    seedFontCache(response);
+    return response;
+}
+
+/**
+ * Reactive store for fetching and caching batches of fonts by ID.
+ * Integrates with TanStack Query via BaseQueryStore and handles
+ * normalized cache seeding.
+ */
+export class BatchFontStore extends BaseQueryStore<UnifiedFont[]> {
+    constructor(initialIds: string[] = []) {
+        super({
+            queryKey: fontKeys.batch(initialIds),
+            queryFn: () => fetchAndSeed(initialIds),
+            enabled: initialIds.length > 0,
+            retry: false,
+        });
+    }
+
+    /**
+     * Updates the IDs to fetch. Triggers a new query.
+     *
+     * @param ids - Array of font IDs
+     */
+    setIds(ids: string[]): void {
+        this.updateOptions({
+            queryKey: fontKeys.batch(ids),
+            queryFn: () => fetchAndSeed(ids),
+            enabled: ids.length > 0,
+            retry: false,
+        });
+    }
+
+    /**
+     * Array of fetched fonts
+     */
+    get fonts(): UnifiedFont[] {
+        return this.result.data ?? [];
+    }
+
+    /**
+     * Whether the query is currently loading
+     */
+    get isLoading(): boolean {
+        return this.result.isLoading;
+    }
+
+    /**
+     * Whether the query encountered an error
+     */
+    get isError(): boolean {
+        return this.result.isError;
+    }
+
+    /**
+     * The error object if the query failed
+     */
+    get error(): Error | null {
+        return (this.result.error as Error) ?? null;
+    }
+}

src/entities/Font/model/store/batchFontStore.test.ts

@@ -0,0 +1,107 @@
+import { queryClient } from '$shared/api/queryClient';
+import { fontKeys } from '$shared/api/queryKeys';
+import {
+    beforeEach,
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import * as api from '../../api/proxy/proxyFonts';
+import {
+    FontNetworkError,
+    FontResponseError,
+} from '../../lib/errors/errors';
+import { BatchFontStore } from './batchFontStore.svelte';
+
+describe('BatchFontStore', () => {
+    beforeEach(() => {
+        queryClient.clear();
+        vi.clearAllMocks();
+    });
+
+    describe('Fetch Behavior', () => {
+        it('should skip fetch when initialized with empty IDs', async () => {
+            const spy = vi.spyOn(api, 'fetchFontsByIds');
+            const store = new BatchFontStore([]);
+            expect(spy).not.toHaveBeenCalled();
+            expect(store.fonts).toEqual([]);
+        });
+
+        it('should fetch and seed cache for valid IDs', async () => {
+            const fonts = [{ id: 'a', name: 'A' }] as any[];
+            vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(fonts);
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.fonts).toEqual(fonts), { timeout: 1000 });
+            expect(queryClient.getQueryData(fontKeys.detail('a'))).toEqual(fonts[0]);
+        });
+    });
+
+    describe('Loading States', () => {
+        it('should transition through loading state', async () => {
+            vi.spyOn(api, 'fetchFontsByIds').mockImplementation(() =>
+                new Promise(r => setTimeout(() => r([{ id: 'a' }] as any), 50))
+            );
+            const store = new BatchFontStore(['a']);
+            expect(store.isLoading).toBe(true);
+            await vi.waitFor(() => expect(store.isLoading).toBe(false), { timeout: 1000 });
+        });
+    });
+
+    describe('Error Handling', () => {
+        it('should wrap network failures in FontNetworkError', async () => {
+            vi.spyOn(api, 'fetchFontsByIds').mockRejectedValue(new Error('Network fail'));
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
+            expect(store.error).toBeInstanceOf(FontNetworkError);
+        });
+
+        it('should handle malformed API responses with FontResponseError', async () => {
+            // Mocking a malformed response that the store should validate
+            vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(null as any);
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
+            expect(store.error).toBeInstanceOf(FontResponseError);
+        });
+
+        it('should have null error in success state', async () => {
+            const fonts = [{ id: 'a' }] as any[];
+            vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(fonts);
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.fonts).toEqual(fonts), { timeout: 1000 });
+            expect(store.error).toBeNull();
+        });
+    });
+
+    describe('Disable Behavior', () => {
+        it('should return empty fonts and not fetch when setIds is called with empty array', async () => {
+            const fonts1 = [{ id: 'a' }] as any[];
+            const spy = vi.spyOn(api, 'fetchFontsByIds').mockResolvedValueOnce(fonts1);
+
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.fonts).toEqual(fonts1), { timeout: 1000 });
+
+            spy.mockClear();
+            store.setIds([]);
+
+            await vi.waitFor(() => expect(store.fonts).toEqual([]), { timeout: 1000 });
+            expect(spy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('Reactivity', () => {
+        it('should refetch when setIds is called', async () => {
+            const fonts1 = [{ id: 'a' }] as any[];
+            const fonts2 = [{ id: 'b' }] as any[];
+            vi.spyOn(api, 'fetchFontsByIds')
+                .mockResolvedValueOnce(fonts1)
+                .mockResolvedValueOnce(fonts2);
+
+            const store = new BatchFontStore(['a']);
+            await vi.waitFor(() => expect(store.fonts).toEqual(fonts1), { timeout: 1000 });
+
+            store.setIds(['b']);
+            await vi.waitFor(() => expect(store.fonts).toEqual(fonts2), { timeout: 1000 });
+        });
+    });
+});

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

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

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[]) {
-    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);
+let visibleFonts = $state<UnifiedFont[]>([]);
 
+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/DisplayFont/ui/FontSampler/FontSampler.stories.svelte

@@ -35,7 +35,6 @@ const { Story } = defineMeta({
 
 <script lang="ts">
 import type { UnifiedFont } from '$entities/Font';
-import { controlManager } from '$features/SetupFont';
 
 // Mock fonts for testing
 const mockArial: UnifiedFont = {

src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

@@ -8,14 +8,13 @@ import {
     FontApplicator,
     type UnifiedFont,
 } from '$entities/Font';
-import { controlManager } from '$features/SetupFont';
+import { typographySettingsStore } from '$features/SetupFont/model';
 import {
     Badge,
     ContentEditable,
     Divider,
     Footnote,
     Stat,
-    StatGroup,
 } from '$shared/ui';
 import { fly } from 'svelte/transition';
 
@@ -37,11 +36,6 @@ interface Props {
 
 let { font, text = $bindable(), index = 0 }: Props = $props();
 
-const fontWeight = $derived(controlManager.weight);
-const fontSize = $derived(controlManager.renderedSize);
-const lineHeight = $derived(controlManager.height);
-const letterSpacing = $derived(controlManager.spacing);
-
 // Adjust the property name to match your UnifiedFont type
 const fontType = $derived((font as any).type ?? (font as any).category ?? '');
 
@@ -52,10 +46,10 @@ const providerBadge = $derived(
 );
 
 const stats = $derived([
-    { label: 'SZ', value: `${fontSize}PX` },
-    { label: 'WGT', value: `${fontWeight}` },
-    { label: 'LH', value: lineHeight?.toFixed(2) },
-    { label: 'LTR', value: `${letterSpacing}` },
+    { label: 'SZ', value: `${typographySettingsStore.renderedSize}PX` },
+    { label: 'WGT', value: `${typographySettingsStore.weight}` },
+    { label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
+    { label: 'LTR', value: `${typographySettingsStore.spacing}` },
 ]);
 </script>
 
@@ -65,7 +59,7 @@ const stats = $derived([
         group relative
         w-full h-full
         bg-paper dark:bg-dark-card
-        border border-black/5 dark:border-white/10
+        border border-subtle
         hover:border-brand dark:hover:border-brand
         hover:shadow-brand/10
         hover:shadow-[5px_5px_0px_0px]
@@ -75,14 +69,14 @@ const stats = $derived([
         min-h-60
         rounded-none
     "
-    style:font-weight={fontWeight}
+    style:font-weight={typographySettingsStore.weight}
 >
     <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
         class="
             flex items-center justify-between
             px-4 sm:px-5 md:px-6 py-3 sm:py-4
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
             bg-paper dark:bg-dark-card
         "
     >
@@ -140,18 +134,18 @@ const stats = $derived([
 
     <!-- ── Main content area ──────────────────────────────────────────── -->
     <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
-        <FontApplicator {font} weight={fontWeight}>
+        <FontApplicator {font} weight={typographySettingsStore.weight}>
             <ContentEditable
                 bind:text
-                {fontSize}
-                {lineHeight}
-                {letterSpacing}
+                fontSize={typographySettingsStore.renderedSize}
+                lineHeight={typographySettingsStore.height}
+                letterSpacing={typographySettingsStore.spacing}
             />
         </FontApplicator>
     </div>
 
     <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
-    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-black/5 dark:border-white/10 flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
+    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-subtle flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
         {#each stats as stat, i}
             <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider {i === 0 ? 'ml-auto' : ''}">
                 {stat.label}:{stat.value}

src/features/SetupFont/index.ts

@@ -1,28 +1,6 @@
-export { TypographyMenu } from './ui';
-
 export {
-    type ControlId,
-    controlManager,
-    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,
+    createTypographySettingsManager,
+    type TypographySettingsManager,
 } from './lib';
+export { typographySettingsStore } from './model';
+export { TypographyMenu } from './ui';

src/features/SetupFont/lib/index.ts

@@ -1,4 +1,4 @@
 export {
-    createTypographyControlManager,
-    type TypographyControlManager,
-} from './controlManager/controlManager.svelte';
+    createTypographySettingsManager,
+    type TypographySettingsManager,
+} from './settingsManager/settingsManager.svelte';

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>;
 
@@ -52,7 +52,7 @@ export interface TypographySettings {
  * Manages multiple typography controls with persistent storage and
  * responsive scaling support for font size.
  */
-export class TypographyControlManager {
+export class TypographySettingsManager {
     /** Map of controls keyed by ID */
     #controls = new SvelteMap<string, Control>();
     /** Responsive multiplier for font size display */
@@ -242,7 +242,7 @@ export class TypographyControlManager {
  * @param storageId - Persistent storage identifier
  * @returns Typography control manager instance
  */
-export function createTypographyControlManager(
+export function createTypographySettingsManager(
     configs: ControlModel<ControlId>[],
     storageId: string = 'glyphdiff:typography',
 ) {
@@ -252,5 +252,5 @@ export function createTypographyControlManager(
         lineHeight: DEFAULT_LINE_HEIGHT,
         letterSpacing: DEFAULT_LETTER_SPACING,
     });
-    return new TypographyControlManager(configs, storage);
+    return new TypographySettingsManager(configs, storage);
 }

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

@@ -1,6 +1,12 @@
 /** @vitest-environment jsdom */
 import {
-    afterEach,
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+} from '$entities/Font';
+import {
     beforeEach,
     describe,
     expect,
@@ -8,21 +14,14 @@ import {
     vi,
 } from 'vitest';
 import {
-    DEFAULT_FONT_SIZE,
-    DEFAULT_FONT_WEIGHT,
-    DEFAULT_LETTER_SPACING,
-    DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-} from '../../model';
-import {
-    TypographyControlManager,
     type TypographySettings,
-} from './controlManager.svelte';
+    TypographySettingsManager,
+} from './settingsManager.svelte';
 
 /**
- * Test Strategy for TypographyControlManager
+ * Test Strategy for TypographySettingsManager
  *
- * This test suite validates the TypographyControlManager state management logic.
+ * This test suite validates the TypographySettingsManager state management logic.
  * These are unit tests for the manager logic, separate from component rendering.
  *
  * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects
@@ -45,7 +44,7 @@ async function flushEffects() {
     await Promise.resolve();
 }
 
-describe('TypographyControlManager - Unit Tests', () => {
+describe('TypographySettingsManager - Unit Tests', () => {
     let mockStorage: TypographySettings;
     let mockPersistentStore: {
         value: TypographySettings;
@@ -85,7 +84,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Initialization', () => {
         it('creates manager with default values from storage', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -105,7 +104,7 @@ describe('TypographyControlManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -117,7 +116,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('initializes font size control with base size multiplied by current multiplier (1)', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -126,7 +125,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('returns all controls via controls getter', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -142,7 +141,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('returns individual controls via specific getters', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -160,7 +159,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('control instances have expected interface', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -179,7 +178,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Multiplier System', () => {
         it('has default multiplier of 1', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -188,7 +187,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates multiplier when set', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -201,7 +200,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('does not update multiplier if set to same value', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -217,7 +216,7 @@ describe('TypographyControlManager - Unit Tests', () => {
             mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -241,7 +240,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates font size control display value when multiplier increases', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -262,7 +261,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Base Size Setter', () => {
         it('updates baseSize when set directly', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -273,7 +272,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates size control value when baseSize is set', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -284,7 +283,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('applies multiplier to size control when baseSize is set', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -298,7 +297,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Rendered Size Calculation', () => {
         it('calculates renderedSize as baseSize * multiplier', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -307,7 +306,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates renderedSize when multiplier changes', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -320,7 +319,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates renderedSize when baseSize changes', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -340,7 +339,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         // proxy effect behavior should be tested in E2E tests.
 
         it('does NOT immediately update baseSize from control change (effect is async)', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -355,7 +354,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('updates baseSize via direct setter (synchronous)', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -380,7 +379,7 @@ describe('TypographyControlManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -393,7 +392,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('syncs to storage after effect flush (async)', async () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -409,7 +408,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('syncs control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -422,7 +421,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('syncs height control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -434,7 +433,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('syncs spacing control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -448,7 +447,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Control Value Getters', () => {
         it('returns current weight value', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -460,7 +459,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('returns current height value', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -472,7 +471,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('returns current spacing value', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -485,7 +484,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
         it('returns default value when control is not found', () => {
             // Create a manager with empty configs (no controls)
-            const manager = new TypographyControlManager([], mockPersistentStore);
+            const manager = new TypographySettingsManager([], mockPersistentStore);
 
             expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
             expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
@@ -503,7 +502,7 @@ describe('TypographyControlManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -536,7 +535,7 @@ describe('TypographyControlManager - Unit Tests', () => {
                 clear: clearSpy,
             };
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -547,7 +546,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('respects multiplier when resetting font size control', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -565,7 +564,7 @@ describe('TypographyControlManager - Unit Tests', () => {
 
     describe('Complex Scenarios', () => {
         it('handles changing multiplier then modifying baseSize', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -586,7 +585,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('maintains correct renderedSize throughout changes', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -608,7 +607,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles multiple control changes in sequence', async () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -633,7 +632,7 @@ describe('TypographyControlManager - Unit Tests', () => {
             mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -645,7 +644,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles very small multiplier', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -658,7 +657,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles large base size with multiplier', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -671,7 +670,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles floating point precision in multiplier', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -690,7 +689,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles control methods (increase/decrease)', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -704,7 +703,7 @@ describe('TypographyControlManager - Unit Tests', () => {
         });
 
         it('handles control boundary conditions', () => {
-            const manager = new TypographyControlManager(
+            const manager = new TypographySettingsManager(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );

src/features/SetupFont/model/index.ts

@@ -1,24 +1 @@
-export {
-    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,
-    controlManager,
-} from './state/manager.svelte';
+export { typographySettingsStore } from './state/typographySettingsStore';

src/features/SetupFont/model/state/manager.svelte.ts

@@ -1,6 +0,0 @@
-import { createTypographyControlManager } from '../../lib';
-import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const';
-
-export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
-
-export const controlManager = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA);

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

@@ -0,0 +1,7 @@
+import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '$entities/Font';
+import { createTypographySettingsManager } from '../../lib';
+
+export const typographySettingsStore = createTypographySettingsManager(
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+    'glyphdiff:comparison:typography',
+);

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

@@ -6,10 +6,14 @@
     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 {
-    Button,
     ComboControl,
     ControlGroup,
     Slider,
@@ -20,12 +24,7 @@ import { Popover } from 'bits-ui';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
-import {
-    MULTIPLIER_L,
-    MULTIPLIER_M,
-    MULTIPLIER_S,
-    controlManager,
-} from '../../model';
+import { typographySettingsStore } from '../../model';
 
 interface Props {
     /**
@@ -52,16 +51,16 @@ $effect(() => {
     if (!responsive) return;
     switch (true) {
         case responsive.isMobile:
-            controlManager.multiplier = MULTIPLIER_S;
+            typographySettingsStore.multiplier = MULTIPLIER_S;
             break;
         case responsive.isTablet:
-            controlManager.multiplier = MULTIPLIER_M;
+            typographySettingsStore.multiplier = MULTIPLIER_M;
             break;
         case responsive.isDesktop:
-            controlManager.multiplier = MULTIPLIER_L;
+            typographySettingsStore.multiplier = MULTIPLIER_L;
             break;
         default:
-            controlManager.multiplier = MULTIPLIER_L;
+            typographySettingsStore.multiplier = MULTIPLIER_L;
     }
 });
 </script>
@@ -80,7 +79,7 @@ $effect(() => {
                             'transition-colors duration-150',
                             'hover:bg-white/50 dark:hover:bg-white/5',
                             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
-                            isOpen && 'bg-paper dark:bg-dark-card border-black/5 dark:border-white/10 shadow-sm',
+                            isOpen && 'bg-paper dark:bg-dark-card border-subtle shadow-sm',
                             className,
                         )}
                     >
@@ -97,7 +96,7 @@ $effect(() => {
                     class={cn(
                         'z-50 w-72',
                         'bg-surface dark:bg-dark-card',
-                        'border border-black/5 dark:border-white/10',
+                        'border border-subtle',
                         'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
                         'rounded-none p-4',
                         'data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -110,7 +109,7 @@ $effect(() => {
                     escapeKeydownBehavior="close"
                 >
                     <!-- Header -->
-                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-black/5 dark:border-white/10">
+                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
                         <div class="flex items-center gap-1.5">
                             <Settings2Icon size={12} class="text-swiss-red" />
                             <span
@@ -133,7 +132,7 @@ $effect(() => {
                     </div>
 
                     <!-- Controls -->
-                    {#each controlManager.controls as control (control.id)}
+                    {#each typographySettingsStore.controls as control (control.id)}
                         <ControlGroup label={control.controlLabel ?? ''}>
                             <Slider
                                 bind:value={control.instance.value}
@@ -155,13 +154,13 @@ $effect(() => {
                 class={cn(
                     'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
                     'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
-                    'border border-black/5 dark:border-white/10',
+                    'border border-subtle',
                     'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
                     'rounded-none ring-1 ring-black/5 dark:ring-white/5',
                 )}
             >
                 <!-- Header: icon + label -->
-                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
+                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-subtle mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
                     <Settings2Icon
                         size={14}
                         class="text-swiss-red"
@@ -174,7 +173,7 @@ $effect(() => {
                 </div>
 
                 <!-- Controls with dividers between each -->
-                {#each controlManager.controls as control, i (control.id)}
+                {#each typographySettingsStore.controls as control, i (control.id)}
                     {#if i > 0}
                         <div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
                     {/if}

src/routes/Page.svelte

@@ -3,10 +3,7 @@
     Description: The main page component of the application.
 -->
 <script lang="ts">
-import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
 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';
 </script>
@@ -18,8 +15,4 @@ import { fade } from 'svelte/transition';
     <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>

src/shared/api/queryKeys.test.ts

@@ -0,0 +1,73 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { fontKeys } from './queryKeys';
+
+describe('fontKeys', () => {
+    describe('Hierarchy', () => {
+        it('should generate base keys', () => {
+            expect(fontKeys.all).toEqual(['fonts']);
+            expect(fontKeys.lists()).toEqual(['fonts', 'list']);
+            expect(fontKeys.batches()).toEqual(['fonts', 'batch']);
+            expect(fontKeys.details()).toEqual(['fonts', 'detail']);
+        });
+    });
+
+    describe('Batch Keys (Stability & Sorting)', () => {
+        it('should sort IDs for stable serialization', () => {
+            const key1 = fontKeys.batch(['b', 'a', 'c']);
+            const key2 = fontKeys.batch(['c', 'b', 'a']);
+            const expected = ['fonts', 'batch', ['a', 'b', 'c']];
+            expect(key1).toEqual(expected);
+            expect(key2).toEqual(expected);
+        });
+
+        it('should handle empty ID arrays', () => {
+            expect(fontKeys.batch([])).toEqual(['fonts', 'batch', []]);
+        });
+
+        it('should not mutate the input array when sorting', () => {
+            const ids = ['c', 'b', 'a'];
+            fontKeys.batch(ids);
+            expect(ids).toEqual(['c', 'b', 'a']);
+        });
+
+        it('batch key should be rooted in batches() base', () => {
+            const key = fontKeys.batch(['a']);
+            expect(key.slice(0, 2)).toEqual(fontKeys.batches());
+        });
+    });
+
+    describe('List Keys (Parameters)', () => {
+        it('should include parameters in list keys', () => {
+            const params = { provider: 'google' };
+            expect(fontKeys.list(params)).toEqual(['fonts', 'list', params]);
+        });
+
+        it('should handle empty parameters', () => {
+            expect(fontKeys.list({})).toEqual(['fonts', 'list', {}]);
+        });
+
+        it('list key should be rooted in lists() base', () => {
+            const key = fontKeys.list({ provider: 'google' });
+            expect(key.slice(0, 2)).toEqual(fontKeys.lists());
+        });
+    });
+
+    describe('Detail Keys', () => {
+        it('should generate unique detail keys per ID', () => {
+            expect(fontKeys.detail('roboto')).toEqual(['fonts', 'detail', 'roboto']);
+        });
+
+        it('should generate different keys for different IDs', () => {
+            expect(fontKeys.detail('roboto')).not.toEqual(fontKeys.detail('open-sans'));
+        });
+
+        it('detail key should be rooted in details() base', () => {
+            const key = fontKeys.detail('roboto');
+            expect(key.slice(0, 2)).toEqual(fontKeys.details());
+        });
+    });
+});

src/shared/api/queryKeys.ts

@@ -0,0 +1,23 @@
+/**
+ * Stable query key factory for font-related queries.
+ * Ensures consistent serialization for batch requests by sorting IDs.
+ */
+export const fontKeys = {
+    /** Base key for all font queries */
+    all: ['fonts'] as const,
+
+    /** Keys for font list queries */
+    lists: () => [...fontKeys.all, 'list'] as const,
+    /** Specific font list key with filter parameters */
+    list: (params: object) => [...fontKeys.lists(), params] as const,
+
+    /** Keys for font batch queries */
+    batches: () => [...fontKeys.all, 'batch'] as const,
+    /** Specific batch key, sorted for stability */
+    batch: (ids: string[]) => [...fontKeys.batches(), [...ids].sort()] as const,
+
+    /** Keys for font detail queries */
+    details: () => [...fontKeys.all, 'detail'] as const,
+    /** Specific font detail key by ID */
+    detail: (id: string) => [...fontKeys.details(), id] as const,
+} as const;

src/shared/lib/helpers/BaseQueryStore.svelte.ts

@@ -0,0 +1,51 @@
+import { queryClient } from '$shared/api/queryClient';
+import {
+    QueryObserver,
+    type QueryObserverOptions,
+    type QueryObserverResult,
+} from '@tanstack/query-core';
+
+/**
+ * Abstract base class for reactive Svelte 5 stores backed by TanStack Query.
+ *
+ * Provides a unified way to use TanStack Query observers within Svelte 5 classes
+ * using runes for reactivity. Handles subscription lifecycle automatically.
+ *
+ * @template TData - The type of data returned by the query.
+ * @template TError - The type of error that can be thrown.
+ */
+export abstract class BaseQueryStore<TData, TError = Error> {
+    #result = $state<QueryObserverResult<TData, TError>>({} as QueryObserverResult<TData, TError>);
+    #observer: QueryObserver<TData, TError>;
+    #unsubscribe: () => void;
+
+    constructor(options: QueryObserverOptions<TData, TError, TData, any, any>) {
+        this.#observer = new QueryObserver(queryClient, options);
+        this.#unsubscribe = this.#observer.subscribe(result => {
+            this.#result = result;
+        });
+    }
+
+    /**
+     * Current query result (reactive)
+     */
+    protected get result(): QueryObserverResult<TData, TError> {
+        return this.#result;
+    }
+
+    /**
+     * Updates observer options dynamically.
+     * Use this when query parameters or dependencies change.
+     */
+    protected updateOptions(options: QueryObserverOptions<TData, TError, TData, any, any>): void {
+        this.#observer.setOptions(options);
+    }
+
+    /**
+     * Cleans up the observer subscription.
+     * Should be called when the store is no longer needed.
+     */
+    destroy(): void {
+        this.#unsubscribe();
+    }
+}

src/shared/lib/helpers/BaseQueryStore.test.ts

@@ -0,0 +1,91 @@
+import { queryClient } from '$shared/api/queryClient';
+import {
+    beforeEach,
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import { BaseQueryStore } from './BaseQueryStore.svelte';
+
+class TestStore extends BaseQueryStore<string> {
+    constructor(key = ['test'], fn = () => Promise.resolve('ok')) {
+        super({
+            queryKey: key,
+            queryFn: fn,
+            retry: false, // Disable retries for faster error testing
+        });
+    }
+    get data() {
+        return this.result.data;
+    }
+    get isLoading() {
+        return this.result.isLoading;
+    }
+    get isError() {
+        return this.result.isError;
+    }
+
+    update(newKey: string[], newFn?: () => Promise<string>) {
+        this.updateOptions({
+            queryKey: newKey,
+            queryFn: newFn ?? (() => Promise.resolve('ok')),
+            retry: false,
+        });
+    }
+}
+
+import * as tq from '@tanstack/query-core';
+
+// ... (TestStore remains same)
+
+describe('BaseQueryStore', () => {
+    beforeEach(() => {
+        queryClient.clear();
+    });
+
+    describe('Lifecycle & Fetching', () => {
+        it('should transition from loading to success', async () => {
+            const store = new TestStore();
+            expect(store.isLoading).toBe(true);
+            await vi.waitFor(() => expect(store.data).toBe('ok'), { timeout: 1000 });
+            expect(store.isLoading).toBe(false);
+        });
+
+        it('should have undefined data and no error in initial loading state', () => {
+            const store = new TestStore(['initial-state'], () => new Promise(r => setTimeout(() => r('late'), 500)));
+            expect(store.data).toBeUndefined();
+            expect(store.isError).toBe(false);
+        });
+    });
+
+    describe('Error Handling', () => {
+        it('should handle query failures', async () => {
+            const store = new TestStore(['fail'], () => Promise.reject(new Error('fail')));
+            await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
+        });
+    });
+
+    describe('Reactivity', () => {
+        it('should refetch and update data when options change', async () => {
+            const store = new TestStore(['key1'], () => Promise.resolve('val1'));
+            await vi.waitFor(() => expect(store.data).toBe('val1'), { timeout: 1000 });
+
+            store.update(['key2'], () => Promise.resolve('val2'));
+            await vi.waitFor(() => expect(store.data).toBe('val2'), { timeout: 1000 });
+        });
+    });
+
+    describe('Cleanup', () => {
+        it('should unsubscribe observer on destroy', () => {
+            const unsubscribe = vi.fn();
+            const subscribeSpy = vi.spyOn(tq.QueryObserver.prototype, 'subscribe').mockReturnValue(unsubscribe);
+
+            const store = new TestStore();
+            store.destroy();
+
+            expect(unsubscribe).toHaveBeenCalled();
+            subscribeSpy.mockRestore();
+        });
+    });
+});

src/shared/ui/Button/Button.svelte

@@ -111,7 +111,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     ghost: cn(
         'bg-transparent',
-        'text-neutral-500 dark:text-neutral-400',
+        'text-secondary',
         'border border-transparent',
         'hover:bg-transparent dark:hover:bg-transparent',
         'hover:text-brand dark:hover:text-brand',
@@ -121,7 +121,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     icon: cn(
         'bg-surface dark:bg-dark-bg',
-        'text-neutral-500 dark:text-neutral-400',
+        'text-secondary',
         'border border-transparent',
         'hover:bg-paper dark:hover:bg-paper',
         'hover:text-brand',
@@ -172,7 +172,7 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
         'bg-paper dark:bg-dark-card border-black/10 dark:border-white/10 shadow-sm text-neutral-900 dark:text-neutral-100',
     ghost: 'bg-transparent dark:bg-transparent text-brand dark:text-brand',
     outline: 'bg-surface dark:bg-paper border-brand',
-    icon: 'bg-paper dark:bg-paper text-brand border-black/5 dark:border-white/10',
+    icon: 'bg-paper dark:bg-paper text-brand border-subtle',
 };
 
 const classes = $derived(cn(
@@ -184,7 +184,7 @@ const classes = $derived(cn(
     'select-none',
     'outline-none',
     'cursor-pointer',
-    'focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
+    'focus-ring',
     'focus-visible:ring-offset-surface dark:focus-visible:ring-offset-dark-bg',
     'disabled:cursor-not-allowed disabled:pointer-events-none',
     // Variant

src/shared/ui/Button/ButtonGroup.svelte

@@ -26,7 +26,7 @@ let { children, class: className, ...rest }: Props = $props();
     class={cn(
         'flex items-center gap-1 p-1',
         'bg-surface dark:bg-dark-bg',
-        'border border-black/5 dark:border-white/10',
+        'border border-subtle',
         'rounded-none',
         'transition-colors duration-500',
         className,

src/shared/ui/ComboControl/ComboControl.svelte

@@ -93,9 +93,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             step={control.step}
             orientation="horizontal"
         />
-        <span
-            class="font-mono text-[0.6875rem] text-neutral-500 dark:text-neutral-400 tabular-nums w-10 text-right shrink-0"
-        >
+        <span class="font-mono text-[0.6875rem] text-secondary tabular-nums w-10 text-right shrink-0">
             {formattedValue()}
         </span>
     </div>
@@ -129,7 +127,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                                 'border border-transparent',
                                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
                                 open
-                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-black/5 dark:border-white/10'
+                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-subtle'
                                     : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel}
@@ -157,7 +155,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
                 <!-- Vertical slider popover -->
                 <PopoverContent
-                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-black/5 dark:border-white/10 shadow-sm bg-paper dark:bg-dark-card"
+                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
                     align="center"
                     side="top"
                 >

src/shared/ui/ControlGroup/ControlGroup.svelte

@@ -24,7 +24,7 @@ interface Props {
 const { label, children, class: className }: Props = $props();
 </script>
 
-<div class={cn('flex flex-col gap-3 py-6 border-b border-black/5 dark:border-white/10 last:border-0', className)}>
+<div class={cn('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
     <div class="flex justify-between items-center text-[0.6875rem] font-primary font-bold tracking-tight text-neutral-900 dark:text-neutral-100 uppercase leading-none">
         {label}
     </div>

src/shared/ui/Input/Input.svelte

@@ -9,6 +9,10 @@ import type { Snippet } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { scale } from 'svelte/transition';
+import {
+    inputSizeConfig,
+    inputVariantConfig,
+} from './config';
 import type {
     InputSize,
     InputVariant,
@@ -80,36 +84,11 @@ let {
     ...rest
 }: Props = $props();
 
-const sizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
-    sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
-    md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
-    lg: { input: 'px-4 py-3', text: 'text-lg md:text-xl', height: 'h-12', clearIcon: 16 },
-    xl: { input: 'px-4 py-3', text: 'text-xl md:text-2xl', height: 'h-14', clearIcon: 18 },
-};
-
-const variantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
-    default: {
-        base: 'bg-paper dark:bg-paper border border-black/5 dark:border-white/10',
-        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
-        error: 'border-brand ring-1 ring-brand/20',
-    },
-    underline: {
-        base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
-        focus: 'focus:border-brand',
-        error: 'border-brand',
-    },
-    filled: {
-        base: 'bg-surface dark:bg-paper border border-transparent',
-        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
-        error: 'border-brand ring-1 ring-brand/20',
-    },
-};
-
 const hasValue = $derived(value !== undefined && value !== '');
 const showClear = $derived(showClearButton && hasValue && !!onclear);
 const hasRightSlot = $derived(!!rightIcon || showClearButton);
-const cfg = $derived(sizeConfig[size]);
-const styles = $derived(variantConfig[variant]);
+const cfg = $derived(inputSizeConfig[size]);
+const styles = $derived(inputVariantConfig[variant]);
 
 const inputClasses = $derived(cn(
     'font-primary rounded-none outline-none transition-all duration-200',
@@ -170,7 +149,7 @@ const inputClasses = $derived(cn(
         <span
             class={cn(
                 'text-[0.625rem] font-mono tracking-wide px-1',
-                error ? 'text-brand ' : 'text-neutral-500 dark:text-neutral-400',
+                error ? 'text-brand ' : 'text-secondary',
             )}
         >
             {helperText}

src/shared/ui/Input/config.ts

@@ -0,0 +1,31 @@
+import type {
+    InputSize,
+    InputVariant,
+} from './types';
+
+/** Size-specific layout classes: padding, text size, height, and clear-icon pixel size. */
+export const inputSizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
+    sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
+    md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
+    lg: { input: 'px-4 py-3', text: 'text-lg md:text-xl', height: 'h-12', clearIcon: 16 },
+    xl: { input: 'px-4 py-3', text: 'text-xl md:text-2xl', height: 'h-14', clearIcon: 18 },
+};
+
+/** Variant-specific classes: base background/border, focus ring, and error state. */
+export const inputVariantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
+    default: {
+        base: 'bg-paper dark:bg-paper border border-subtle',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+    underline: {
+        base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
+        focus: 'focus:border-brand',
+        error: 'border-brand',
+    },
+    filled: {
+        base: 'bg-surface dark:bg-paper border border-transparent',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+};

src/shared/ui/SearchBar/SearchBar.svelte

@@ -20,7 +20,7 @@ let {
 }: Props = $props();
 </script>
 
-<Input bind:value variant="underline" {...rest}>
+<Input bind:value variant="default" {...rest}>
     {#snippet rightIcon(size)}
         <SearchIcon size={inputIconSize[size]} />
     {/snippet}

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -84,7 +84,7 @@ function close() {
             'overflow-hidden',
             'will-change-[width]',
             'transition-[width] duration-300 ease-out',
-            'border-r border-black/5 dark:border-white/10',
+            'border-r border-subtle',
             'bg-surface dark:bg-dark-bg',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
             'transition-[width,opacity] duration-300 ease-out',

src/shared/ui/Slider/Slider.svelte

@@ -70,7 +70,7 @@ let {
 const isVertical = $derived(orientation === 'vertical');
 
 const labelClasses = `font-mono text-[0.625rem] tabular-nums shrink-0
-    text-neutral-500 dark:text-neutral-400
+    text-secondary
     group-hover:text-neutral-700 dark:group-hover:text-neutral-300
     transition-colors`;
 

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

@@ -1,5 +1,5 @@
 /**
- * Font comparison store for side-by-side font comparison
+ * Font comparison store — TanStack Query refactor
  *
  * Manages the state for comparing two fonts character by character.
  * Persists font selection to localStorage and handles font loading
@@ -7,24 +7,21 @@
  *
  * Features:
  * - Persistent font selection (survives page refresh)
- * - Font loading state tracking
+ * - Font loading state tracking via BatchFontStore + TanStack Query
  * - Sample text management
  * - Typography controls (size, weight, line height, spacing)
  * - Slider position for character-by-character morphing
  */
 
 import {
+    BatchFontStore,
     type FontLoadRequestConfig,
     type UnifiedFont,
     appliedFontsManager,
-    fetchFontsByIds,
     fontStore,
     getFontUrl,
 } from '$entities/Font';
-import {
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    createTypographyControlManager,
-} from '$features/SetupFont';
+import { typographySettingsStore } from '$features/SetupFont/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 
@@ -47,11 +44,13 @@ const storage = createPersistentStore<ComparisonState>('glyphdiff:comparison', {
 });
 
 /**
- * Store for managing font comparison state
+ * Store for managing font comparison state.
  *
- * Handles font selection persistence, fetching, and loading state tracking.
- * Uses the CSS Font Loading API to ensure fonts are loaded before
- * showing the comparison interface.
+ * Uses BatchFontStore (TanStack Query) to fetch fonts by ID, replacing
+ * the previous hand-rolled async fetch approach. Three reactive effects
+ * handle: (1) syncing batch results into fontA/fontB, (2) triggering the
+ * CSS Font Loading API, and (3) falling back to default fonts when
+ * storage is empty.
  */
 export class ComparisonStore {
     /** Font for side A */
@@ -60,27 +59,44 @@ export class ComparisonStore {
     #fontB = $state<UnifiedFont | undefined>();
     /** Sample text to display */
     #sampleText = $state('The quick brown fox jumps over the lazy dog');
-    /** Whether currently restoring from storage */
-    #isRestoring = $state(true);
     /** Whether fonts are loaded and ready to display */
     #fontsReady = $state(false);
     /** Active side for single-font operations */
     #side = $state<Side>('A');
     /** Slider position for character morphing (0-100) */
     #sliderPosition = $state(50);
-    /** Typography controls for this comparison */
-    #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
+    // /** Typography controls for this comparison */
+    // #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
+    /** TanStack Query-backed batch font fetcher */
+    #batchStore: BatchFontStore;
 
     constructor() {
-        this.restoreFromStorage();
+        // Synchronously seed the batch store with any IDs already in storage
+        const { fontAId, fontBId } = storage.value;
+        this.#batchStore = new BatchFontStore(fontAId && fontBId ? [fontAId, fontBId] : []);
 
-        // Reactively handle font loading and default selection
         $effect.root(() => {
-            // Effect 1: Trigger font loading whenever selection or weight changes
+            // Effect 1: Sync batch results → fontA / fontB
+            $effect(() => {
+                const fonts = this.#batchStore.fonts;
+                if (fonts.length === 0) return;
+
+                const { fontAId: aId, fontBId: bId } = storage.value;
+                if (aId) {
+                    const fa = fonts.find(f => f.id === aId);
+                    if (fa) this.#fontA = fa;
+                }
+                if (bId) {
+                    const fb = fonts.find(f => f.id === bId);
+                    if (fb) this.#fontB = fb;
+                }
+            });
+
+            // Effect 2: Trigger font loading whenever selection or weight changes
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const weight = this.#typography.weight;
+                const weight = typographySettingsStore.weight;
 
                 if (!fa || !fb) return;
 
@@ -104,52 +120,38 @@ export class ComparisonStore {
                 }
             });
 
-            // Effect 2: Set defaults if we aren't restoring and have no selection
+            // Effect 3: Set default fonts when storage is empty
             $effect(() => {
-                // Wait until we are done checking storage
-                if (this.#isRestoring) {
-                    return;
-                }
+                if (this.#fontA && this.#fontB) return;
 
-                // If we already have a selection, do nothing
-                if (this.#fontA && this.#fontB) {
-                    return;
-                }
-
-                // Check if fonts are available to set as defaults
                 const fonts = fontStore.fonts;
                 if (fonts.length >= 2) {
-                    // We need full objects with all URLs, so we trigger a batch fetch
-                    // This is the "batch request" seen on initial load when storage is empty
                     untrack(() => {
-                        this.restoreDefaults([fonts[0].id, fonts[fonts.length - 1].id]);
+                        const id1 = fonts[0].id;
+                        const id2 = fonts[fonts.length - 1].id;
+                        storage.value = { fontAId: id1, fontBId: id2 };
+                        this.#batchStore.setIds([id1, id2]);
                     });
                 }
             });
+
+            // 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);
+                };
+            });
         });
     }
 
     /**
-     * Set default fonts by fetching full objects from the API
-     */
-    private async restoreDefaults(ids: string[]) {
-        this.#isRestoring = true;
-        try {
-            const fullFonts = await fetchFontsByIds(ids);
-            if (fullFonts.length >= 2) {
-                this.#fontA = fullFonts[0];
-                this.#fontB = fullFonts[1];
-                this.updateStorage();
-            }
-        } catch (error) {
-            console.warn('[ComparisonStore] Failed to set defaults:', error);
-        } finally {
-            this.#isRestoring = false;
-        }
-    }
-
-    /**
-     * Checks if fonts are actually loaded in the browser at current weight
+     * Checks if fonts are actually loaded in the browser at current weight.
      *
      * Uses CSS Font Loading API to prevent FOUT. Waits for fonts to load
      * and forces a layout/paint cycle before marking as ready.
@@ -160,8 +162,8 @@ export class ComparisonStore {
             return;
         }
 
-        const weight = this.#typography.weight;
-        const size = this.#typography.renderedSize;
+        const weight = typographySettingsStore.weight;
+        const size = typographySettingsStore.renderedSize;
         const fontAName = this.#fontA?.name;
         const fontBName = this.#fontB?.name;
 
@@ -182,75 +184,39 @@ export class ComparisonStore {
         this.#fontsReady = false;
 
         try {
-            // Step 1: Load fonts into memory
             await Promise.all([
                 document.fonts.load(fontAString),
                 document.fonts.load(fontBString),
             ]);
-
-            // Step 2: Wait for browser to be ready to render
             await document.fonts.ready;
-
-            // Step 3: Force a layout/paint cycle (critical!)
             await new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    requestAnimationFrame(resolve); // Double rAF ensures paint completes
+                    requestAnimationFrame(resolve);
                 });
             });
-
             this.#fontsReady = true;
         } catch (error) {
             console.warn('[ComparisonStore] Font loading failed:', error);
-            setTimeout(() => this.#fontsReady = true, 1000);
+            setTimeout(() => (this.#fontsReady = true), 1000);
         }
     }
 
     /**
-     * Restore state from persistent storage
-     *
-     * Fetches saved fonts from the API and restores them to the store.
-     */
-    async restoreFromStorage() {
-        this.#isRestoring = true;
-        const { fontAId, fontBId } = storage.value;
-
-        if (fontAId && fontBId) {
-            try {
-                // Batch fetch the saved fonts
-                const fonts = await fetchFontsByIds([fontAId, fontBId]);
-                const loadedFontA = fonts.find((f: UnifiedFont) => f.id === fontAId);
-                const loadedFontB = fonts.find((f: UnifiedFont) => f.id === fontBId);
-
-                if (loadedFontA && loadedFontB) {
-                    this.#fontA = loadedFontA;
-                    this.#fontB = loadedFontB;
-                }
-            } catch (error) {
-                console.warn('[ComparisonStore] Failed to restore fonts:', error);
-            }
-        }
-
-        // Mark restoration as complete (whether success or fail)
-        this.#isRestoring = false;
-    }
-
-    /**
-     * Update storage with current state
+     * Updates persistent storage with the current font selection.
      */
     private updateStorage() {
-        // Don't save if we are currently restoring (avoid race)
-        if (this.#isRestoring) return;
-
         storage.value = {
             fontAId: this.#fontA?.id ?? null,
             fontBId: this.#fontB?.id ?? null,
         };
     }
 
-    /** Typography control manager */
-    get typography() {
-        return this.#typography;
-    }
+    // // ── Getters / Setters ─────────────────────────────────────────────────────
+
+    // /** Typography control manager */
+    // get typography() {
+    //     return typographySettingsStore;
+    // }
 
     /** Font for side A */
     get fontA() {
@@ -299,35 +265,25 @@ export class ComparisonStore {
         this.#sliderPosition = value;
     }
 
-    /**
-     * Check if both fonts are selected and loaded
-     */
+    /** Whether both fonts are selected and loaded */
     get isReady() {
         return !!this.#fontA && !!this.#fontB && this.#fontsReady;
     }
 
-    /** Whether currently loading or restoring */
+    /** Whether currently loading (batch fetch in flight or fonts not yet painted) */
     get isLoading() {
-        return this.#isRestoring || !this.#fontsReady;
+        return this.#batchStore.isLoading || !this.#fontsReady;
     }
 
     /**
-     * Public initializer (optional, as constructor starts it)
-     */
-    initialize() {
-        if (!this.#isRestoring && !this.#fontA && !this.#fontB) {
-            this.restoreFromStorage();
-        }
-    }
-
-    /**
-     * Reset all state and clear storage
+     * Resets all state, clears storage, and disables the batch query.
      */
     resetAll() {
         this.#fontA = undefined;
         this.#fontB = undefined;
+        this.#batchStore.setIds([]);
         storage.clear();
-        this.#typography.reset();
+        typographySettingsStore.reset();
     }
 }
 

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

@@ -1,20 +1,16 @@
 /**
- * Unit tests for ComparisonStore
+ * Unit tests for ComparisonStore (TanStack Query refactor)
  *
- * Tests the font comparison store functionality including:
- * - Font loading via CSS Font Loading API
- * - Storage synchronization when fonts change
- * - Default values from fontStore
- * - Reset functionality
- * - isReady computed state
+ * Uses the real BatchFontStore so Svelte $state reactivity works correctly.
+ * Controls network behaviour via vi.spyOn on the proxyFonts API layer.
  */
 
 /** @vitest-environment jsdom */
 
 import type { UnifiedFont } from '$entities/Font';
 import { UNIFIED_FONTS } from '$entities/Font/lib/mocks';
+import { queryClient } from '$shared/api/queryClient';
 import {
-    afterEach,
     beforeEach,
     describe,
     expect,
@@ -22,80 +18,13 @@ import {
     vi,
 } from 'vitest';
 
-// Mock all dependencies
-vi.mock('$entities/Font', () => ({
-    fetchFontsByIds: vi.fn(),
-    fontStore: { fonts: [] },
-    appliedFontsManager: {
-        touch: vi.fn(),
-        getFontStatus: vi.fn(),
-        ready: vi.fn(() => Promise.resolve()),
-    },
-    getFontUrl: vi.fn(() => 'http://example.com/font.woff2'),
-}));
+// ── Persistent-store mock ─────────────────────────────────────────────────────
 
-vi.mock('$features/SetupFont', () => ({
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [
-        {
-            id: 'font_size',
-            value: 48,
-            min: 8,
-            max: 100,
-            step: 1,
-            increaseLabel: 'Increase Font Size',
-            decreaseLabel: 'Decrease Font Size',
-            controlLabel: 'Size',
-        },
-        {
-            id: 'font_weight',
-            value: 400,
-            min: 100,
-            max: 900,
-            step: 100,
-            increaseLabel: 'Increase Font Weight',
-            decreaseLabel: 'Decrease Font Weight',
-            controlLabel: 'Weight',
-        },
-        {
-            id: 'line_height',
-            value: 1.5,
-            min: 1,
-            max: 2,
-            step: 0.05,
-            increaseLabel: 'Increase Line Height',
-            decreaseLabel: 'Decrease Line Height',
-            controlLabel: 'Leading',
-        },
-        {
-            id: 'letter_spacing',
-            value: 0,
-            min: -0.1,
-            max: 0.5,
-            step: 0.01,
-            increaseLabel: 'Increase Letter Spacing',
-            decreaseLabel: 'Decrease Letter Spacing',
-            controlLabel: 'Tracking',
-        },
-    ],
-    createTypographyControlManager: vi.fn(() => ({
-        weight: 400,
-        renderedSize: 48,
-        reset: vi.fn(),
-    })),
-}));
-
-// Create mock storage accessible from both vi.mock factory and tests
 const mockStorage = vi.hoisted(() => {
     const storage: any = {};
-    storage._value = {
-        fontAId: null as string | null,
-        fontBId: null as string | null,
-    };
+    storage._value = { fontAId: null, fontBId: null };
     storage._clear = vi.fn(() => {
-        storage._value = {
-            fontAId: null,
-            fontBId: null,
-        };
+        storage._value = { fontAId: null, fontBId: null };
     });
 
     Object.defineProperty(storage, 'value', {
@@ -122,471 +51,228 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
     createPersistentStore: vi.fn(() => mockStorage),
 }));
 
-// Import after mocks
+// ── $entities/Font mock — keep real BatchFontStore, stub singletons ───────────
+
+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()),
+        },
+        getFontUrl: vi.fn(() => 'https://example.com/font.woff2'),
+    };
+});
+
+// ── $features/SetupFont mock ──────────────────────────────────────────────────
+
+vi.mock('$features/SetupFont', () => ({
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [],
+    createTypographyControlManager: vi.fn(() => ({
+        weight: 400,
+        renderedSize: 48,
+        reset: vi.fn(),
+    })),
+}));
+
+vi.mock('$features/SetupFont/model', () => ({
+    typographySettingsStore: {
+        weight: 400,
+        renderedSize: 48,
+        reset: vi.fn(),
+    },
+}));
+
+// ── Imports (after mocks) ─────────────────────────────────────────────────────
+
 import {
-    fetchFontsByIds,
+    appliedFontsManager,
     fontStore,
 } from '$entities/Font';
-import { createTypographyControlManager } from '$features/SetupFont';
+import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
 import { ComparisonStore } from './comparisonStore.svelte';
 
-describe('ComparisonStore', () => {
-    // Mock fonts
-    const mockFontA: UnifiedFont = UNIFIED_FONTS.roboto;
-    const mockFontB: UnifiedFont = UNIFIED_FONTS.openSans;
+// ── Tests ─────────────────────────────────────────────────────────────────────
 
-    // Mock document.fonts
-    let mockFontFaceSet: {
-        check: ReturnType<typeof vi.fn>;
-        load: ReturnType<typeof vi.fn>;
-        ready: Promise<FontFaceSet>;
-    };
+describe('ComparisonStore', () => {
+    const mockFontA: UnifiedFont = UNIFIED_FONTS.roboto; // id: 'roboto'
+    const mockFontB: UnifiedFont = UNIFIED_FONTS.openSans; // id: 'open-sans'
 
     beforeEach(() => {
-        // Clear all mocks
+        queryClient.clear();
         vi.clearAllMocks();
-
-        // Clear localStorage
-        localStorage.clear();
-
-        // Reset mock storage value via the helper
-        mockStorage._value = {
-            fontAId: null,
-            fontBId: null,
-        };
+        mockStorage._value = { fontAId: null, fontBId: null };
         mockStorage._clear.mockClear();
-
-        // Setup mock fontStore
         (fontStore as any).fonts = [];
 
-        // Setup mock fetchFontsByIds
-        vi.mocked(fetchFontsByIds).mockResolvedValue([]);
-
-        // Setup mock createTypographyControlManager
-        vi.mocked(createTypographyControlManager).mockReturnValue({
-            weight: 400,
-            renderedSize: 48,
-            reset: vi.fn(),
-        } as any);
-
-        // Setup mock document.fonts
-        mockFontFaceSet = {
-            check: vi.fn(() => true),
-            load: vi.fn(() => Promise.resolve()),
-            ready: Promise.resolve({} as FontFaceSet),
-        };
+        // Default: fetchFontsByIds returns empty so tests that don't care don't hang
+        vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([]);
 
+        // document.fonts: check returns true so #checkFontsLoaded resolves immediately
         Object.defineProperty(document, 'fonts', {
-            value: mockFontFaceSet,
+            value: {
+                check: vi.fn(() => true),
+                load: vi.fn(() => Promise.resolve()),
+                ready: Promise.resolve({} as FontFaceSet),
+            },
             writable: true,
             configurable: true,
         });
     });
 
-    afterEach(() => {
-        // Ensure document.fonts is always reset to a valid mock
-        // This prevents issues when tests delete or undefined document.fonts
-        if (!document.fonts || typeof document.fonts.check !== 'function') {
-            Object.defineProperty(document, 'fonts', {
-                value: {
-                    check: vi.fn(() => true),
-                    load: vi.fn(() => Promise.resolve()),
-                    ready: Promise.resolve({} as FontFaceSet),
-                },
-                writable: true,
-                configurable: true,
-            });
-        }
-    });
+    // ── Initialization ────────────────────────────────────────────────────────
 
     describe('Initialization', () => {
         it('should create store with initial empty state', () => {
             const store = new ComparisonStore();
-
-            expect(store.fontA).toBeUndefined();
-            expect(store.fontB).toBeUndefined();
-            expect(store.text).toBe('The quick brown fox jumps over the lazy dog');
-            expect(store.side).toBe('A');
-            expect(store.sliderPosition).toBe(50);
-        });
-
-        it('should initialize with default sample text', () => {
-            const store = new ComparisonStore();
-
-            expect(store.text).toBe('The quick brown fox jumps over the lazy dog');
-        });
-
-        it('should have typography manager attached', () => {
-            const store = new ComparisonStore();
-
-            expect(store.typography).toBeDefined();
-        });
-    });
-
-    describe('Storage Synchronization', () => {
-        it('should update storage when fontA is set', () => {
-            const store = new ComparisonStore();
-
-            store.fontA = mockFontA;
-
-            expect(mockStorage._value.fontAId).toBe(mockFontA.id);
-        });
-
-        it('should update storage when fontB is set', () => {
-            const store = new ComparisonStore();
-
-            store.fontB = mockFontB;
-
-            expect(mockStorage._value.fontBId).toBe(mockFontB.id);
-        });
-
-        it('should update storage when both fonts are set', () => {
-            const store = new ComparisonStore();
-
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            expect(mockStorage._value.fontAId).toBe(mockFontA.id);
-            expect(mockStorage._value.fontBId).toBe(mockFontB.id);
-        });
-
-        it('should set storage to null when font is set to undefined', () => {
-            const store = new ComparisonStore();
-
-            store.fontA = mockFontA;
-            expect(mockStorage._value.fontAId).toBe(mockFontA.id);
-
-            store.fontA = undefined;
-            expect(mockStorage._value.fontAId).toBeNull();
-        });
-    });
-
-    describe('Restore from Storage', () => {
-        it('should restore fonts from storage when both IDs exist', async () => {
-            mockStorage._value.fontAId = mockFontA.id;
-            mockStorage._value.fontBId = mockFontB.id;
-
-            vi.mocked(fetchFontsByIds).mockResolvedValue([mockFontA, mockFontB]);
-
-            const store = new ComparisonStore();
-            await store.restoreFromStorage();
-
-            expect(fetchFontsByIds).toHaveBeenCalledWith([mockFontA.id, mockFontB.id]);
-            expect(store.fontA).toEqual(mockFontA);
-            expect(store.fontB).toEqual(mockFontB);
-        });
-
-        it('should not restore when storage has null IDs', async () => {
-            mockStorage._value.fontAId = null;
-            mockStorage._value.fontBId = null;
-
-            const store = new ComparisonStore();
-            await store.restoreFromStorage();
-
-            expect(fetchFontsByIds).not.toHaveBeenCalled();
             expect(store.fontA).toBeUndefined();
             expect(store.fontB).toBeUndefined();
         });
+    });
 
-        it('should handle fetch errors gracefully when restoring', async () => {
+    // ── Restoration from Storage ──────────────────────────────────────────────
+
+    describe('Restoration from Storage (via BatchFontStore)', () => {
+        it('should restore fontA and fontB from stored IDs', async () => {
             mockStorage._value.fontAId = mockFontA.id;
             mockStorage._value.fontBId = mockFontB.id;
-
-            vi.mocked(fetchFontsByIds).mockRejectedValue(new Error('Network error'));
-
-            const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
 
             const store = new ComparisonStore();
-            await store.restoreFromStorage();
 
-            expect(consoleSpy).toHaveBeenCalled();
+            await vi.waitFor(() => {
+                expect(store.fontA?.id).toBe(mockFontA.id);
+                expect(store.fontB?.id).toBe(mockFontB.id);
+            }, { timeout: 2000 });
+        });
+
+        it('should handle fetch errors during restoration gracefully', async () => {
+            mockStorage._value.fontAId = mockFontA.id;
+            mockStorage._value.fontBId = mockFontB.id;
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockRejectedValue(new Error('Network fail'));
+
+            const store = new ComparisonStore();
+
+            // Store stays in valid state — no throw, fonts remain undefined
+            await vi.waitFor(() => expect(store.isLoading).toBe(true)); // stuck loading since no fonts
             expect(store.fontA).toBeUndefined();
             expect(store.fontB).toBeUndefined();
-
-            consoleSpy.mockRestore();
         });
+    });
 
-        it('should handle partial restoration when only one font is found', async () => {
-            // Ensure fontStore is empty so $effect doesn't interfere
-            (fontStore as any).fonts = [];
+    // ── Default Fallbacks ─────────────────────────────────────────────────────
 
+    describe('Default Fallbacks', () => {
+        it('should update storage with default IDs when storage is empty', async () => {
+            (fontStore as any).fonts = [mockFontA, mockFontB];
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
+
+            new ComparisonStore();
+
+            await vi.waitFor(() => {
+                expect(mockStorage._value.fontAId).toBe(mockFontA.id);
+                expect(mockStorage._value.fontBId).toBe(mockFontB.id);
+            });
+        });
+    });
+
+    // ── Loading State ─────────────────────────────────────────────────────────
+
+    describe('Aggregate Loading State', () => {
+        it('should be loading initially when storage has IDs', async () => {
             mockStorage._value.fontAId = mockFontA.id;
             mockStorage._value.fontBId = mockFontB.id;
-
-            // Only return fontA (simulating partial data from API)
-            vi.mocked(fetchFontsByIds).mockResolvedValue([mockFontA]);
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockImplementation(
+                () => new Promise(r => setTimeout(() => r([mockFontA, mockFontB]), 50)),
+            );
 
             const store = new ComparisonStore();
-            // Wait for async restoration from constructor
-            await new Promise(resolve => setTimeout(resolve, 10));
+            expect(store.isLoading).toBe(true);
 
-            // The store should call fetchFontsByIds with both IDs
-            expect(fetchFontsByIds).toHaveBeenCalledWith([mockFontA.id, mockFontB.id]);
-
-            // When only one font is found, the store handles it gracefully
-            // (both fonts need to be found for restoration to set them)
-            // The key behavior tested here is that partial fetch doesn't crash
-            // and the store remains functional
-
-            // Store should not have crashed and should be in a valid state
-            expect(store).toBeDefined();
+            await vi.waitFor(() => expect(store.isLoading).toBe(false), { timeout: 2000 });
         });
     });
 
-    describe('Font Loading with CSS Font Loading API', () => {
-        it('should construct correct font strings for checking', async () => {
-            mockFontFaceSet.check.mockReturnValue(false);
-            (fontStore as any).fonts = [mockFontA, mockFontB];
-            vi.mocked(fetchFontsByIds).mockResolvedValue([mockFontA, mockFontB]);
-
-            const store = new ComparisonStore();
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            // Wait for async operations
-            await new Promise(resolve => setTimeout(resolve, 0));
-
-            // Check that font strings are constructed correctly
-            const expectedFontAString = '400 48px "Roboto"';
-            const expectedFontBString = '400 48px "Open Sans"';
-
-            expect(mockFontFaceSet.load).toHaveBeenCalledWith(expectedFontAString);
-            expect(mockFontFaceSet.load).toHaveBeenCalledWith(expectedFontBString);
-        });
-
-        it('should handle missing document.fonts API gracefully', () => {
-            // Delete the fonts property entirely to simulate missing API
-            delete (document as any).fonts;
-
-            const store = new ComparisonStore();
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            // Should not throw and should still work
-            expect(store.fontA).toStrictEqual(mockFontA);
-            expect(store.fontB).toStrictEqual(mockFontB);
-        });
-
-        it('should handle font loading errors gracefully', async () => {
-            // Mock check to return false (fonts not loaded)
-            mockFontFaceSet.check.mockReturnValue(false);
-            // Mock load to fail
-            mockFontFaceSet.load.mockRejectedValue(new Error('Font load failed'));
-
-            (fontStore as any).fonts = [mockFontA, mockFontB];
-            vi.mocked(fetchFontsByIds).mockResolvedValue([mockFontA, mockFontB]);
-
-            const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
-            const store = new ComparisonStore();
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            // Wait for async operations and timeout fallback
-            await new Promise(resolve => setTimeout(resolve, 1100));
-
-            expect(consoleSpy).toHaveBeenCalled();
-            consoleSpy.mockRestore();
-        });
-    });
-
-    describe('Default Values from fontStore', () => {
-        it('should set default fonts from fontStore when available', () => {
-            // Note: This test relies on Svelte 5's $effect which may not work
-            // reliably in the test environment. We test the logic path instead.
-            (fontStore as any).fonts = [mockFontA, mockFontB];
-
-            const store = new ComparisonStore();
-
-            // The default fonts should be set when storage is empty
-            // In the actual app, this happens via $effect in the constructor
-            // In tests, we verify the store can have fonts set manually
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            expect(store.fontA).toBeDefined();
-            expect(store.fontB).toBeDefined();
-        });
-
-        it('should use first and last font from fontStore as defaults', () => {
-            const mockFontC = UNIFIED_FONTS.lato;
-            (fontStore as any).fonts = [mockFontA, mockFontC, mockFontB];
-
-            const store = new ComparisonStore();
-
-            // Manually set the first font to test the logic
-            store.fontA = mockFontA;
-
-            expect(store.fontA?.id).toBe(mockFontA.id);
-        });
-    });
+    // ── Reset ─────────────────────────────────────────────────────────────────
 
     describe('Reset Functionality', () => {
         it('should reset all state and clear storage', () => {
             const store = new ComparisonStore();
-
-            // Set some values
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-            store.text = 'Custom text';
-            store.side = 'B';
-            store.sliderPosition = 75;
-
-            // Reset
             store.resetAll();
-
-            // Check all state is cleared
-            expect(store.fontA).toBeUndefined();
-            expect(store.fontB).toBeUndefined();
             expect(mockStorage._clear).toHaveBeenCalled();
         });
 
-        it('should reset typography controls when resetAll is called', () => {
-            const mockReset = vi.fn();
-            vi.mocked(createTypographyControlManager).mockReturnValue({
-                weight: 400,
-                renderedSize: 48,
-                reset: mockReset,
-            } as any);
-
-            const store = new ComparisonStore();
-            store.resetAll();
-
-            expect(mockReset).toHaveBeenCalled();
-        });
-
-        it('should not affect text property on reset', () => {
-            const store = new ComparisonStore();
-
-            store.text = 'Custom text';
-            store.resetAll();
-
-            // Text is not reset by resetAll
-            expect(store.text).toBe('Custom text');
-        });
-    });
-
-    describe('isReady Computed State', () => {
-        it('should return false when fonts are not set', () => {
-            const store = new ComparisonStore();
-
-            expect(store.isReady).toBe(false);
-        });
-
-        it('should return false when only fontA is set', () => {
-            const store = new ComparisonStore();
-            store.fontA = mockFontA;
-
-            expect(store.isReady).toBe(false);
-        });
-
-        it('should return false when only fontB is set', () => {
-            const store = new ComparisonStore();
-            store.fontB = mockFontB;
-
-            expect(store.isReady).toBe(false);
-        });
-
-        it('should return true when both fonts are set', () => {
-            const store = new ComparisonStore();
-
-            // Manually set fonts
-            store.fontA = mockFontA;
-            store.fontB = mockFontB;
-
-            // After setting both fonts, isReady should eventually be true
-            // Note: In actual testing with Svelte 5 runes, the reactivity
-            // may not work in Node.js environment, so this tests the logic path
-            expect(store.fontA).toBeDefined();
-            expect(store.fontB).toBeDefined();
-        });
-    });
-
-    describe('isLoading State', () => {
-        it('should return true when restoring from storage', async () => {
+        it('should clear fontA and fontB on reset', async () => {
             mockStorage._value.fontAId = mockFontA.id;
             mockStorage._value.fontBId = mockFontB.id;
-
-            // Make fetch take some time
-            vi.mocked(fetchFontsByIds).mockImplementation(
-                () => new Promise(resolve => setTimeout(() => resolve([mockFontA, mockFontB]), 10)),
-            );
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
 
             const store = new ComparisonStore();
-            const restorePromise = store.restoreFromStorage();
+            await vi.waitFor(() => expect(store.fontA?.id).toBe(mockFontA.id), { timeout: 2000 });
 
-            // While restoring, isLoading should be true
-            expect(store.isLoading).toBe(true);
-
-            await restorePromise;
-
-            // After restoration, isLoading should be false
-            expect(store.isLoading).toBe(false);
+            store.resetAll();
+            expect(store.fontA).toBeUndefined();
+            expect(store.fontB).toBeUndefined();
         });
     });
 
-    describe('Getters and Setters', () => {
-        it('should allow getting and setting sample text', () => {
-            const store = new ComparisonStore();
+    // ── Pin / Unpin ───────────────────────────────────────────────────────────
 
-            store.text = 'Hello World';
-            expect(store.text).toBe('Hello World');
+    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('should allow getting and setting side', () => {
-            const store = new ComparisonStore();
-
-            expect(store.side).toBe('A');
-
-            store.side = 'B';
-            expect(store.side).toBe('B');
-        });
-
-        it('should allow getting and setting slider position', () => {
-            const store = new ComparisonStore();
-
-            store.sliderPosition = 75;
-            expect(store.sliderPosition).toBe(75);
-        });
-
-        it('should allow getting typography manager', () => {
-            const store = new ComparisonStore();
-
-            expect(store.typography).toBeDefined();
-        });
-    });
-
-    describe('Edge Cases', () => {
-        it('should handle empty font names gracefully', () => {
-            const emptyFont = { ...mockFontA, name: '' };
+        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 });
 
-            store.fontA = emptyFont;
-            store.fontB = mockFontB;
+            const mockFontC: typeof mockFontA = { ...mockFontA, id: 'playfair', name: 'Playfair Display' };
+            vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontC, mockFontB]);
+            store.fontA = mockFontC;
 
-            // Should not throw
-            expect(store.fontA).toEqual(emptyFont);
-        });
-
-        it('should handle fontA with undefined name', () => {
-            const noNameFont = { ...mockFontA, name: undefined as any };
-
-            const store = new ComparisonStore();
-
-            store.fontA = noNameFont;
-
-            expect(store.fontA).toEqual(noNameFont);
-        });
-
-        it('should handle setSide with both valid values', () => {
-            const store = new ComparisonStore();
-
-            store.side = 'A';
-            expect(store.side).toBe('A');
-
-            store.side = 'B';
-            expect(store.side).toBe('B');
+            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/Character/Character.svelte

@@ -3,6 +3,7 @@
     Renders a single character with morphing animation
 -->
 <script lang="ts">
+import { typographySettingsStore } from '$features/SetupFont';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { comparisonStore } from '../../model';
 
@@ -25,7 +26,7 @@ let { char, proximity, isPast }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
@@ -51,6 +52,7 @@ $effect(() => {
             <span
                 class={cn(
                     'char-inner',
+                    'transition-colors duration-300',
                     isPast
                         ? 'text-swiss-black/75 dark:text-brand/75'
                         : 'text-neutral-950 dark:text-white',

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

@@ -6,23 +6,18 @@
 <script lang="ts">
 import { NavigationWrapper } from '$entities/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
-import {
-    ControlGroup,
-    SidebarContainer,
-    Slider,
-} from '$shared/ui';
+import { SidebarContainer } from '$shared/ui';
 import {
     getContext,
     untrack,
 } from 'svelte';
-import { comparisonStore } from '../../model';
 import FontList from '../FontList/FontList.svelte';
 import Header from '../Header/Header.svelte';
+import Search from '../Search/Search.svelte';
 import Sidebar from '../Sidebar/Sidebar.svelte';
 import SliderArea from '../SliderArea/SliderArea.svelte';
 
 const responsive = getContext<ResponsiveManager>('responsive');
-const typography = $derived(comparisonStore.typography);
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 let isSidebarOpen = $state(!isMobileOrTabletPortrait);
 
@@ -43,52 +38,9 @@ $effect(() => {
                 {#snippet sidebar()}
                     <Sidebar class="w-full h-full border-none">
                         {#snippet main()}
+                            <Search />
                             <FontList />
                         {/snippet}
-
-                        {#snippet controls()}
-                            {#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
-                                <ControlGroup label="Size">
-                                    <Slider
-                                        bind:value={typography.sizeControl.value}
-                                        min={typography.sizeControl.min}
-                                        max={typography.sizeControl.max}
-                                        step={typography.sizeControl.step}
-                                    />
-                                </ControlGroup>
-
-                                <ControlGroup label="Weight">
-                                    <Slider
-                                        bind:value={typography.weightControl.value}
-                                        min={typography.weightControl.min}
-                                        max={typography.weightControl.max}
-                                        step={typography.weightControl.step}
-                                    />
-                                </ControlGroup>
-
-                                <div class="grid grid-cols-2 gap-6 mt-4">
-                                    <ControlGroup label="Leading" class="border-0 py-0">
-                                        <Slider
-                                            bind:value={typography.heightControl.value}
-                                            min={typography.heightControl.min}
-                                            max={typography.heightControl.max}
-                                            step={typography.heightControl.step}
-                                            format={(v => v.toFixed(1))}
-                                        />
-                                    </ControlGroup>
-
-                                    <ControlGroup label="Tracking" class="border-0 py-0">
-                                        <Slider
-                                            bind:value={typography.spacingControl.value}
-                                            min={typography.spacingControl.min}
-                                            max={typography.spacingControl.max}
-                                            step={typography.spacingControl.step}
-                                            format={(v => v.toFixed(2))}
-                                        />
-                                    </ControlGroup>
-                                </div>
-                            {/if}
-                        {/snippet}
                     </Sidebar>
                 {/snippet}
             </SidebarContainer>

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

@@ -4,6 +4,7 @@
 -->
 <script lang="ts">
 import {
+    DEFAULT_FONT_WEIGHT,
     FontApplicator,
     FontVirtualList,
     type UnifiedFont,
@@ -18,8 +19,6 @@ import { crossfade } from 'svelte/transition';
 import { comparisonStore } from '../../model';
 
 const side = $derived(comparisonStore.side);
-const typography = $derived(comparisonStore.typography);
-
 let prevIndexA: number | null = null;
 let prevIndexB: number | null = null;
 let selectedIndexA: number | null = null;
@@ -71,17 +70,17 @@ $effect(() => {
 </script>
 
 <div class="flex-1 min-h-0 h-full">
-    <div class="py-2 pl-4 relative flex flex-col min-h-0 h-full">
-        <div class="px-2 py-4 mr-4 sticky border-b border-black/5 dark:border-white/10 mb-2">
+    <div class="py-2 relative flex flex-col min-h-0 h-full">
+        <div class="py-2 mx-6 sticky border-b border-subtle">
             <Label class="font-primary text-neutral-400" bold variant="default" size="sm" uppercase>
                 Typeface Selection
             </Label>
         </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"
+            class="bg-transparent min-h-0 h-full scroll-stable py-2 pl-6 pr-4"
         >
             {#snippet children({ item: font, index })}
                 {@const isSelectedA = font.id === comparisonStore.fontA?.id}
@@ -95,7 +94,7 @@ $effect(() => {
                     class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
                     iconPosition="right"
                 >
-                    <FontApplicator {font} weight={typography.weight}>{font.name}</FontApplicator>
+                    <FontApplicator {font}>{font.name}</FontApplicator>
 
                     {#snippet icon()}
                         {#if active}

src/widgets/ComparisonView/ui/Header/Header.svelte

@@ -53,7 +53,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
         'flex items-center justify-between',
         'px-4 md:px-8 py-4 md:py-6',
         'h-16 md:h-20 z-20',
-        'border-b border-black/5 dark:border-white/10',
+        'border-b border-subtle',
         'bg-surface dark:bg-dark-bg',
         className,
     )}

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

@@ -3,8 +3,8 @@
     Renders a line of text in the SliderArea
 -->
 <script lang="ts">
+import { typographySettingsStore } from '$features/SetupFont';
 import type { Snippet } from 'svelte';
-import { comparisonStore } from '../../model';
 
 interface LineChar {
     char: string;
@@ -26,7 +26,7 @@ interface Props {
      */
     character: Snippet<[{ char: string; index: number }]>;
 }
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let { chars, character }: Props = $props();
 </script>

src/widgets/ComparisonView/ui/Search/Search.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { filterManager } from '$features/GetFonts';
+import { SearchBar } from '$shared/ui';
+</script>
+
+<div class="p-6 border-b border-black/5">
+    <SearchBar
+        id="font-search"
+        class="w-full"
+        placeholder="Typeface Search"
+        bind:value={filterManager.queryValue}
+        fullWidth
+    />
+</div>

src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte

@@ -44,7 +44,7 @@ let {
         'flex flex-col h-full',
         'w-80',
         'bg-surface dark:bg-dark-bg',
-        'border-r border-black/5 dark:border-white/10',
+        'border-r border-subtle',
         'transition-colors duration-500',
         className,
     )}
@@ -53,7 +53,7 @@ let {
     <div
         class="
             p-6 shrink-0
-            border-b border-black/5 dark:border-white/10
+            border-b border-subtle
             bg-surface dark:bg-dark-bg
         "
     >
@@ -100,7 +100,7 @@ let {
             class="
                 shrink-0 p-6
                 bg-surface dark:bg-dark-bg
-                border-t border-black/5 dark:border-white/10
+                border-t border-subtle
                 z-10
             "
         >

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

@@ -8,6 +8,8 @@
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
 -->
 <script lang="ts">
+import { TypographyMenu } from '$features/SetupFont';
+import { typographySettingsStore } from '$features/SetupFont/model';
 import {
     type ResponsiveManager,
     debounce,
@@ -42,7 +44,7 @@ let { isSidebarOpen = false, class: className }: Props = $props();
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let container = $state<HTMLElement>();
 
@@ -179,12 +181,7 @@ const scaleClass = $derived(
     The paper div inside scales down when the sidebar opens on desktop.
 -->
 <div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
-    <!--
-        Paper surface.
-        Replaces the old glassmorphism card with a clean white/dark sheet.
-        Scale transition replaces motion.div spring — CSS transition-transform
-        is smooth enough here; a JS spring would add ~4kb for minimal gain.
-    -->
+    <!-- Paper surface -->
     <div
         class={cn(
             'w-full h-full flex flex-col items-center justify-center relative',
@@ -248,4 +245,10 @@ const scaleClass = $derived(
             {/if}
         </div>
     </div>
+
+    <TypographyMenu
+        class={cn(
+            'absolute bottom-4 sm:bottom-5 right-4 sm:left-1/2 sm:right-[unset] sm:-translate-x-1/2 z-50',
+        )}
+    />
 </div>

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

@@ -14,7 +14,7 @@ import {
 import { FontSampler } from '$features/DisplayFont';
 import {
     TypographyMenu,
-    controlManager,
+    typographySettingsStore,
 } from '$features/SetupFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
@@ -60,11 +60,11 @@ const checkPosition = throttle(() => {
 const fontRowHeight = $derived.by(() =>
     createFontRowSizeResolver({
         getFonts: () => fontStore.fonts,
-        getWeight: () => controlManager.weight,
+        getWeight: () => typographySettingsStore.weight,
         getPreviewText: () => text,
         getContainerWidth: () => containerWidth,
-        getFontSizePx: () => controlManager.renderedSize,
-        getLineHeightPx: () => controlManager.height * controlManager.renderedSize,
+        getFontSizePx: () => typographySettingsStore.renderedSize,
+        getLineHeightPx: () => typographySettingsStore.height * typographySettingsStore.renderedSize,
         getStatus: key => appliedFontsManager.statuses.get(key),
         contentHorizontalPadding: SAMPLER_CONTENT_PADDING_X,
         chromeHeight: SAMPLER_CHROME_HEIGHT,
@@ -97,7 +97,7 @@ const fontRowHeight = $derived.by(() =>
     <FontVirtualList
         itemHeight={fontRowHeight}
         useWindowScroll={true}
-        weight={controlManager.weight}
+        weight={typographySettingsStore.weight}
         columns={layoutManager.columns}
         gap={layoutManager.gap}
         {skeleton}