diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..7b519c7
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,195 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["import"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn",
+    // style/restriction off: opt-in, contradictory grab-bags. Wanted rules enabled individually below.
+    "style": "off",
+    "restriction": "off"
+  },
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    "build",
+    ".svelte-kit",
+    ".vercel",
+    "*.config.js",
+    "*.config.ts"
+  ],
+  "rules": {
+    "no-console": "warn",
+    "no-debugger": "error",
+    "no-alert": "warn",
+
+    // no-cycle resolves $-aliases via tsconfig auto-discovery (no resolver config in oxlint)
+    "import/no-cycle": "error",
+    "import/no-duplicates": "warn",
+    "import/no-unassigned-import": "off", // CSS/side-effect imports are intentional
+
+    "no-sequences": "error",
+    "no-underscore-dangle": "off",
+    "no-shadow": "warn",
+    "no-implicit-coercion": "warn",
+    "no-await-in-loop": "warn",
+    "no-return-assign": "warn",
+    "no-new": "warn",
+    "no-unneeded-ternary": "warn"
+  },
+  // FSD boundaries. oxlint has no zone rule, so layer/segment direction is enforced
+  // with no-restricted-imports patterns scoped per glob. Layer order (high->low):
+  // app(exempt top shell) > routes > widgets > features > entities > shared.
+  // A layer bans imports from itself (cross-slice via alias) and every layer above.
+  // Overrides are LAST-WINS, not merged: a file matching two overrides keeps only the
+  // last rule config. So the domain override (below) is a self-contained superset, and
+  // the test/story override (last) fully disables boundary checks for those files.
+  "overrides": [
+    // shared = lowest layer: imports nothing above it
+    {
+      "files": ["src/shared/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": [
+                "$app",
+                "$app/*",
+                "$routes",
+                "$routes/*",
+                "$widgets",
+                "$widgets/*",
+                "$features",
+                "$features/*",
+                "$entities",
+                "$entities/*"
+              ],
+              "message": "FSD layer violation: `shared` is the lowest layer and may not import from any layer above it."
+            }
+          ]
+        }]
+      }
+    },
+    // entities: import shared only; no other entity via alias; interior ui<-only-ui
+    {
+      "files": ["src/entities/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": ["$app", "$app/*", "$routes", "$routes/*", "$widgets", "$widgets/*", "$features", "$features/*"],
+              "message": "FSD layer violation: `entities` may only import from `shared`."
+            },
+            {
+              "group": ["$entities", "$entities/*"],
+              "message": "FSD cross-slice violation: do not import another entity via its alias. Use relative imports inside your own slice; invert the dependency through a higher layer for cross-slice needs."
+            },
+            {
+              "group": ["../ui", "../ui/*", "../../ui/*"],
+              "message": "FSD segment violation: only `ui` may import `ui`. Interior direction is ui -> model -> domain."
+            }
+          ]
+        }]
+      }
+    },
+    // features: import entities/shared only; no other feature via alias
+    {
+      "files": ["src/features/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": ["$app", "$app/*", "$routes", "$routes/*", "$widgets", "$widgets/*"],
+              "message": "FSD layer violation: `features` may only import from `entities` and `shared`."
+            },
+            {
+              "group": ["$features", "$features/*"],
+              "message": "FSD cross-slice violation: do not import another feature via its alias. Invert the dependency through a higher layer (widget/route)."
+            },
+            {
+              "group": ["../ui", "../ui/*", "../../ui/*"],
+              "message": "FSD segment violation: only `ui` may import `ui`. Interior direction is ui -> model -> domain."
+            }
+          ]
+        }]
+      }
+    },
+    // widgets: import features/entities/shared only; no other widget via alias
+    {
+      "files": ["src/widgets/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": ["$app", "$app/*", "$routes", "$routes/*"],
+              "message": "FSD layer violation: `widgets` may only import from `features`, `entities`, and `shared`."
+            },
+            {
+              "group": ["$widgets", "$widgets/*"],
+              "message": "FSD cross-slice violation: do not import another widget via its alias. Invert the dependency through the route layer."
+            },
+            {
+              "group": ["../ui", "../ui/*", "../../ui/*"],
+              "message": "FSD segment violation: only `ui` may import `ui`. Interior direction is ui -> model -> domain."
+            }
+          ]
+        }]
+      }
+    },
+    // routes: top of the FSD list, imports any layer below; only app is above it
+    {
+      "files": ["src/routes/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            { "group": ["$app", "$app/*"], "message": "FSD layer violation: `routes` may not import from `app`." }
+          ]
+        }]
+      }
+    },
+    // domain (FSD+): pure logic. Imports NO layer (not even shared) and no sibling
+    // model/ui segment. Superset: wins over the layer override above for these files.
+    {
+      "files": ["src/**/domain/**"],
+      "rules": {
+        "no-restricted-imports": ["error", {
+          "patterns": [
+            {
+              "group": [
+                "$app",
+                "$app/*",
+                "$routes",
+                "$routes/*",
+                "$widgets",
+                "$widgets/*",
+                "$features",
+                "$features/*",
+                "$entities",
+                "$entities/*",
+                "$shared",
+                "$shared/*"
+              ],
+              "message": "FSD+ domain isolation: `domain` is pure business logic and may not import any layer (including `shared`). Allowed: relative imports within `domain` and framework-agnostic npm packages."
+            },
+            {
+              "group": ["../model", "../model/*", "../../model/*", "../ui", "../ui/*", "../../ui/*"],
+              "message": "FSD+ domain isolation: `domain` may not import sibling `model` or `ui` segments. Dependency flows ui -> model -> domain, never back."
+            }
+          ]
+        }]
+      }
+    },
+    // tests/stories/fixtures legitimately cross-import (e.g. $entities/Font/testing).
+    // Must be LAST so last-wins disables boundary checks for them.
+    {
+      "files": ["**/*.test.ts", "**/*.spec.ts", "**/*.stories.svelte", "src/**/testing/**"],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ]
+}
diff --git a/e2e/preview-text.test.ts b/e2e/preview-text.test.ts
index f138363..c3e60f5 100644
--- a/e2e/preview-text.test.ts
+++ b/e2e/preview-text.test.ts
@@ -8,9 +8,9 @@ test.describe('preview text', () => {
         await comparison.pickPair('Inter', 'Roboto');
         await comparison.setPreviewText('Sphinx');
 
-        // Each grapheme renders as a `.char-wrap` cell in the slider once
-        // both fonts are loaded. Six glyphs → six cells.
-        await expect(comparison.slider.locator('.char-wrap')).toHaveCount(6);
+        // Window chars render as `.char-wrap` cells for crossfade.
+        // With WINDOW_SIZE=5, "Sphinx" (6 chars) fits 5 in the window.
+        await expect(comparison.slider.locator('.char-wrap')).toHaveCount(5);
     });
 
     test('preserves the typed value in the input', async ({ comparison }) => {
diff --git a/oxlint.json b/oxlint.json
deleted file mode 100644
index 5d0d57b..0000000
--- a/oxlint.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "categories": {
-    "correctness": "error",
-    "suspicious": "warn",
-    "perf": "warn",
-    "style": "warn",
-    "restriction": "error"
-  },
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "ignore": [
-    "node_modules",
-    "dist",
-    "build",
-    ".svelte-kit",
-    ".vercel",
-    "*.config.js",
-    "*.config.ts"
-  ],
-  "rules": {
-    "no-console": "off",
-    "no-debugger": "error",
-    "no-alert": "warn"
-  }
-}
diff --git a/package.json b/package.json
index e42ae0a..f9f5b58 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,10 @@
   "version": "0.0.1",
   "packageManager": "yarn@4.11.0",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "**/router.ts"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -65,6 +69,7 @@
   },
   "dependencies": {
     "@chenglou/pretext": "0.0.6",
-    "@tanstack/svelte-query": "6.1.28"
+    "@tanstack/svelte-query": "6.1.28",
+    "sv-router": "^0.16.3"
   }
 }
diff --git a/src/app/App.svelte b/src/app/App.svelte
index 38a8bce..ad5a97e 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -6,21 +6,27 @@
 /**
  * App Component
  *
- * Application entry point component. Wraps the main page route within the shared
+ * Application entry point component. Wraps the active route within the shared
  * layout shell. This is the root component mounted by the application.
  *
  * Structure:
  * - QueryProvider provides TanStack Query client for data fetching
  * - Layout provides sidebar, header/footer, and page container
- * - Page renders the current route content
+ * - Router renders the matched route component
  */
-import Page from '$routes/Page.svelte';
-import { QueryProvider } from './providers';
+import '$routes/router';
+import { Router } from 'sv-router';
+import {
+    AppBindingsProvider,
+    QueryProvider,
+} from './providers';
 import Layout from './ui/Layout.svelte';
 </script>
 
 <QueryProvider>
-    <Layout>
-        <Page />
-    </Layout>
+    <AppBindingsProvider>
+        <Layout>
+            <Router />
+        </Layout>
+    </AppBindingsProvider>
 </QueryProvider>
diff --git a/src/app/providers/AppBindings.svelte b/src/app/providers/AppBindings.svelte
new file mode 100644
index 0000000..3640dda
--- /dev/null
+++ b/src/app/providers/AppBindings.svelte
@@ -0,0 +1,24 @@
+<!--
+    Component: AppBindings
+    Provider that starts app-wide store bindings (filters → sort → font catalog)
+    for its subtree. Mount-scoped so the bindings' lifetime tracks the app tree.
+-->
+<script lang="ts">
+import { startFilterBindings } from '$features/FilterAndSortFonts';
+import { onMount } from 'svelte';
+import type { Snippet } from 'svelte';
+
+interface Props {
+    /**
+     * Content snippet
+     */
+    children?: Snippet;
+}
+
+let { children }: Props = $props();
+
+// startFilterBindings returns its $effect.root cleanup; onMount runs it on unmount.
+onMount(() => startFilterBindings());
+</script>
+
+{@render children?.()}
diff --git a/src/app/providers/QueryProvider.svelte b/src/app/providers/QueryProvider.svelte
index 8806e54..eeb42b7 100644
--- a/src/app/providers/QueryProvider.svelte
+++ b/src/app/providers/QueryProvider.svelte
@@ -6,7 +6,7 @@
     descendants of this provider.
 -->
 <script lang="ts">
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
 import { QueryClientProvider } from '@tanstack/svelte-query';
 import type { Snippet } from 'svelte';
 
@@ -18,6 +18,9 @@ interface Props {
 }
 
 let { children }: Props = $props();
+
+// First call to the lazy singleton — constructs the shared client for the app.
+const queryClient = getQueryClient();
 </script>
 
 <QueryClientProvider client={queryClient}>
diff --git a/src/app/providers/index.ts b/src/app/providers/index.ts
index 80a7590..b8363e6 100644
--- a/src/app/providers/index.ts
+++ b/src/app/providers/index.ts
@@ -1 +1,2 @@
+export { default as AppBindingsProvider } from './AppBindings.svelte';
 export { default as QueryProvider } from './QueryProvider.svelte';
diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index 40075be..753d6f9 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -3,7 +3,7 @@
     Application shell with providers and page wrapper
 -->
 <script lang="ts">
-import { themeManager } from '$features/ChangeAppTheme';
+import { getThemeManager } from '$features/ChangeAppTheme';
 import G from '$shared/assets/G.svg';
 import { ResponsiveProvider } from '$shared/lib';
 import { cn } from '$shared/lib';
@@ -32,6 +32,8 @@ interface Props {
 
 let { children }: Props = $props();
 let fontsReady = $state(true);
+
+const themeManager = getThemeManager();
 const theme = $derived(themeManager.value);
 
 onMount(() => themeManager.init());
diff --git a/src/entities/Breadcrumb/model/index.ts b/src/entities/Breadcrumb/model/index.ts
deleted file mode 100644
index ae6af4f..0000000
--- a/src/entities/Breadcrumb/model/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './store/scrollBreadcrumbsStore.svelte';
-export * from './types/types.ts';
diff --git a/src/entities/Font/api/proxy/proxyFonts.test.ts b/src/entities/Font/api/proxy/proxyFonts.test.ts
index 10bbaa8..a6ccc67 100644
--- a/src/entities/Font/api/proxy/proxyFonts.test.ts
+++ b/src/entities/Font/api/proxy/proxyFonts.test.ts
@@ -19,7 +19,9 @@ vi.mock('$shared/api/api', () => ({
 }));
 
 import { api } from '$shared/api/api';
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import { fontKeys } from '$shared/api/queryKeys';
 import { FontResponseError } from '../../lib/errors/errors';
 import {
diff --git a/src/entities/Font/api/proxy/proxyFonts.ts b/src/entities/Font/api/proxy/proxyFonts.ts
index 5b953de..515c4c8 100644
--- a/src/entities/Font/api/proxy/proxyFonts.ts
+++ b/src/entities/Font/api/proxy/proxyFonts.ts
@@ -11,7 +11,7 @@
  */
 
 import { api } from '$shared/api/api';
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
 import { fontKeys } from '$shared/api/queryKeys';
 import { buildQueryString } from '$shared/lib/utils';
 import type { QueryParams } from '$shared/lib/utils';
@@ -26,7 +26,7 @@ import type { UnifiedFont } from '../../model/types';
  */
 export function seedFontCache(fonts: UnifiedFont[]): void {
     fonts.forEach(font => {
-        queryClient.setQueryData(fontKeys.detail(font.id), font);
+        getQueryClient().setQueryData(fontKeys.detail(font.id), font);
     });
 }
 
diff --git a/src/entities/Font/domain/DualFontLayout/DualFontLayout.test.ts b/src/entities/Font/domain/DualFontLayout/DualFontLayout.test.ts
new file mode 100644
index 0000000..f3bc49f
--- /dev/null
+++ b/src/entities/Font/domain/DualFontLayout/DualFontLayout.test.ts
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import { installCanvasMock } from '$shared/lib/helpers/__mocks__/canvas';
+import { clearCache } from '@chenglou/pretext';
+import {
+    beforeEach,
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { DualFontLayout } from './DualFontLayout';
+
+// FontA: 10px per character. FontB: 15px per character.
+// The mock dispatches on whether the font string contains 'FontA' or 'FontB'.
+const FONT_A_WIDTH = 10;
+const FONT_B_WIDTH = 15;
+
+function fontWidthFactory(font: string, text: string): number {
+    const perChar = font.includes('FontA') ? FONT_A_WIDTH : FONT_B_WIDTH;
+    return text.length * perChar;
+}
+
+describe('DualFontLayout', () => {
+    let layout: DualFontLayout;
+
+    beforeEach(() => {
+        installCanvasMock(fontWidthFactory);
+        clearCache();
+        layout = new DualFontLayout();
+    });
+
+    it('returns empty result for empty string', () => {
+        const result = layout.layout('', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        expect(result.lines).toHaveLength(0);
+        expect(result.totalHeight).toBe(0);
+    });
+
+    it('uses worst-case width across both fonts to determine line breaks', () => {
+        // 'AB CD' — two 2-char words separated by a space.
+        // FontA: 'AB'=20px, 'CD'=20px. Both fit in 25px? No: 'AB CD' = 50px total.
+        // FontB: 'AB'=30px, 'CD'=30px. Width 35px forces wrap after 'AB '.
+        // Unified must use FontB widths — so it must wrap at the same place FontB wraps.
+        const result = layout.layout('AB CD', '400 16px "FontA"', '400 16px "FontB"', 35, 20);
+        expect(result.lines.length).toBeGreaterThan(1);
+        // First line text must not include both words.
+        expect(result.lines[0].text).not.toContain('CD');
+    });
+
+    it('provides xA and xB offsets for both fonts on a single line', () => {
+        // 'ABC' fits in 500px for both fonts.
+        // FontA: A@0(w=10), B@10(w=10), C@20(w=10)
+        // FontB: A@0(w=15), B@15(w=15), C@30(w=15)
+        const result = layout.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        const chars = result.lines[0].chars;
+
+        expect(chars).toHaveLength(3);
+
+        expect(chars[0].xA).toBe(0);
+        expect(chars[0].widthA).toBe(FONT_A_WIDTH);
+        expect(chars[0].xB).toBe(0);
+        expect(chars[0].widthB).toBe(FONT_B_WIDTH);
+
+        expect(chars[1].xA).toBe(FONT_A_WIDTH); // 10
+        expect(chars[1].widthA).toBe(FONT_A_WIDTH);
+        expect(chars[1].xB).toBe(FONT_B_WIDTH); // 15
+        expect(chars[1].widthB).toBe(FONT_B_WIDTH);
+
+        expect(chars[2].xA).toBe(FONT_A_WIDTH * 2); // 20
+        expect(chars[2].xB).toBe(FONT_B_WIDTH * 2); // 30
+    });
+
+    it('returns cached result when called again with same arguments', () => {
+        const r1 = layout.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        const r2 = layout.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        expect(r2).toBe(r1); // strict reference equality — same object
+    });
+
+    it('re-computes when text changes', () => {
+        const r1 = layout.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        const r2 = layout.layout('DEF', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        expect(r2).not.toBe(r1);
+        expect(r2.lines[0].text).not.toBe(r1.lines[0].text);
+    });
+
+    it('re-computes when width changes', () => {
+        const r1 = layout.layout('Hello World', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        const r2 = layout.layout('Hello World', '400 16px "FontA"', '400 16px "FontB"', 60, 20);
+        expect(r2).not.toBe(r1);
+    });
+
+    it('re-computes when fontA changes', () => {
+        const r1 = layout.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
+        const r2 = layout.layout('ABC', '400 24px "FontA"', '400 16px "FontB"', 500, 20);
+        expect(r2).not.toBe(r1);
+    });
+});
diff --git a/src/entities/Font/domain/DualFontLayout/DualFontLayout.ts b/src/entities/Font/domain/DualFontLayout/DualFontLayout.ts
new file mode 100644
index 0000000..a572979
--- /dev/null
+++ b/src/entities/Font/domain/DualFontLayout/DualFontLayout.ts
@@ -0,0 +1,278 @@
+import {
+    type PreparedTextWithSegments,
+    layoutWithLines,
+    prepareWithSegments,
+} from '@chenglou/pretext';
+
+/**
+ * Default render size in px when callers omit the `size` arg on `layout()`.
+ */
+const DEFAULT_RENDER_SIZE_PX = 16;
+
+/**
+ * Per-grapheme data computed during dual-font layout. Internal to the engine;
+ * consumed by computeLineRenderModel to derive the per-frame render model.
+ */
+export interface ComparisonChar {
+    /**
+     * Grapheme cluster (may be >1 code unit for emoji, combining marks).
+     */
+    char: string;
+    /**
+     * X offset from line start in fontA, pixels.
+     */
+    xA: number;
+    /**
+     * Advance width of this grapheme in fontA, pixels.
+     */
+    widthA: number;
+    /**
+     * X offset from line start in fontB, pixels.
+     */
+    xB: number;
+    /**
+     * Advance width of this grapheme in fontB, pixels.
+     */
+    widthB: number;
+}
+
+/**
+ * A single laid-out line. `chars` carries the per-grapheme data needed by
+ * computeLineRenderModel. Consumers should not iterate it directly.
+ */
+export interface ComparisonLine {
+    /**
+     * Full text of this line as returned by pretext.
+     */
+    text: string;
+    /**
+     * Rendered width in pixels — maximum across fontA and fontB.
+     */
+    width: number;
+    /**
+     * Per-grapheme metadata for both fonts.
+     */
+    chars: ComparisonChar[];
+}
+
+/**
+ * Aggregated output of a dual-font layout pass.
+ */
+export interface ComparisonResult {
+    /**
+     * Per-line grapheme data. Empty when input text is empty.
+     */
+    lines: ComparisonLine[];
+    /**
+     * Total height in pixels.
+     */
+    totalHeight: number;
+}
+
+/**
+ * Dual-font text layout engine backed by `@chenglou/pretext`.
+ *
+ * Computes identical line breaks for two fonts simultaneously by constructing a
+ * "unified" prepared-text object whose per-glyph widths are the worst-case maximum
+ * of font A and font B. This guarantees that both fonts wrap at exactly the same
+ * positions, making side-by-side or slider comparison visually coherent.
+ *
+ * Relies on pretext's published structural fields on `PreparedTextWithSegments`
+ * (`widths`, `breakableFitAdvances`, `lineEndFitAdvances`, `lineEndPaintAdvances`)
+ * which are exposed via the `PreparedCore` intersection in `@chenglou/pretext@0.0.6`.
+ *
+ * **Two-level caching strategy**
+ * 1. Font-change cache (`#preparedA`, `#preparedB`, `#unifiedPrepared`): rebuilt only
+ *    when `text`, `fontA`, or `fontB` changes. `prepareWithSegments` is expensive
+ *    (canvas measurement), so this avoids re-measuring during slider interaction.
+ * 2. Layout cache (`#lastResult`): rebuilt when `width` or `lineHeight` changes but
+ *    the fonts have not changed. Line-breaking is cheap relative to measurement, but
+ *    still worth skipping on every render tick.
+ *
+ * Per-frame slider state derivation lives in `computeLineRenderModel`, not on the
+ * class. This class is pure layout + caching; it holds no reactive state.
+ */
+export class DualFontLayout {
+    #segmenter: Intl.Segmenter;
+
+    // Cached prepared data
+    #preparedA: PreparedTextWithSegments | null = null;
+    #preparedB: PreparedTextWithSegments | null = null;
+    #unifiedPrepared: PreparedTextWithSegments | null = null;
+
+    #lastText = '';
+    #lastFontA = '';
+    #lastFontB = '';
+    #lastSpacing = 0;
+    #lastSize = 0;
+
+    // Cached layout results
+    #lastWidth = -1;
+    #lastLineHeight = -1;
+    #lastResult: ComparisonResult | null = null;
+
+    constructor(locale?: string) {
+        this.#segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
+    }
+
+    /**
+     * Lay out `text` using both fonts within `width` pixels.
+     *
+     * Line breaks are determined by the worst-case (maximum) glyph widths across
+     * both fonts, so both fonts always wrap at identical positions.
+     *
+     * @param text       Raw text to lay out.
+     * @param fontA      CSS font string for the first font: `"weight sizepx \"family\""`.
+     * @param fontB      CSS font string for the second font: `"weight sizepx \"family\""`.
+     * @param width      Available line width in pixels.
+     * @param lineHeight Line height in pixels (passed directly to pretext).
+     * @param spacing    Letter spacing in em (from typography settings).
+     * @param size       Current font size in pixels (used to convert spacing em to px).
+     * @returns          Per-line grapheme data for both fonts. Empty `lines` when `text` is empty.
+     */
+    layout(
+        text: string,
+        fontA: string,
+        fontB: string,
+        width: number,
+        lineHeight: number,
+        spacing: number = 0,
+        size: number = DEFAULT_RENDER_SIZE_PX,
+    ): ComparisonResult {
+        if (!text) {
+            return { lines: [], totalHeight: 0 };
+        }
+
+        const spacingPx = spacing * size;
+
+        const isFontChange = text !== this.#lastText
+            || fontA !== this.#lastFontA
+            || fontB !== this.#lastFontB
+            || spacing !== this.#lastSpacing
+            || size !== this.#lastSize;
+
+        const isLayoutChange = width !== this.#lastWidth || lineHeight !== this.#lastLineHeight;
+
+        if (!isFontChange && !isLayoutChange && this.#lastResult) {
+            return this.#lastResult;
+        }
+
+        // 1. Prepare (or use cache)
+        if (isFontChange) {
+            this.#preparedA = prepareWithSegments(text, fontA);
+            this.#preparedB = prepareWithSegments(text, fontB);
+            this.#unifiedPrepared = this.#createUnifiedPrepared(this.#preparedA, this.#preparedB, spacingPx);
+
+            this.#lastText = text;
+            this.#lastFontA = fontA;
+            this.#lastFontB = fontB;
+            this.#lastSpacing = spacing;
+            this.#lastSize = size;
+        }
+
+        if (!this.#unifiedPrepared || !this.#preparedA || !this.#preparedB) {
+            return { lines: [], totalHeight: 0 };
+        }
+
+        const { lines, height } = layoutWithLines(this.#unifiedPrepared, width, lineHeight);
+
+        // 3. Map results back to both fonts
+        const preparedA = this.#preparedA;
+        const preparedB = this.#preparedB;
+        const resultLines: ComparisonLine[] = lines.map(line => {
+            const chars: ComparisonChar[] = [];
+            let currentXA = 0;
+            let currentXB = 0;
+
+            const start = line.start;
+            const end = line.end;
+
+            for (let sIdx = start.segmentIndex; sIdx <= end.segmentIndex; sIdx++) {
+                const segmentText = preparedA.segments[sIdx];
+                if (segmentText === undefined) {
+                    continue;
+                }
+
+                const graphemes = Array.from(this.#segmenter.segment(segmentText), s => s.segment);
+
+                const advA = preparedA.breakableFitAdvances[sIdx];
+                const advB = preparedB.breakableFitAdvances[sIdx];
+
+                const gStart = sIdx === start.segmentIndex ? start.graphemeIndex : 0;
+                const gEnd = sIdx === end.segmentIndex ? end.graphemeIndex : graphemes.length;
+
+                for (let gIdx = gStart; gIdx < gEnd; gIdx++) {
+                    const char = graphemes[gIdx];
+                    let wA = advA != null ? advA[gIdx]! : preparedA.widths[sIdx]!;
+                    let wB = advB != null ? advB[gIdx]! : preparedB.widths[sIdx]!;
+
+                    // Apply letter spacing (tracking) to the width of each character
+                    wA += spacingPx;
+                    wB += spacingPx;
+
+                    chars.push({
+                        char,
+                        xA: currentXA,
+                        widthA: wA,
+                        xB: currentXB,
+                        widthB: wB,
+                    });
+                    currentXA += wA;
+                    currentXB += wB;
+                }
+            }
+
+            return {
+                text: line.text,
+                width: line.width,
+                chars,
+            };
+        });
+
+        this.#lastWidth = width;
+        this.#lastLineHeight = lineHeight;
+        this.#lastResult = {
+            lines: resultLines,
+            totalHeight: height,
+        };
+
+        return this.#lastResult;
+    }
+
+    /**
+     * Merge two prepared texts into a worst-case unified version so both fonts
+     * wrap at identical positions. Per-segment widths are the elementwise max
+     * across both fonts, with `spacingPx` added to model letter-spacing.
+     */
+    #createUnifiedPrepared(
+        a: PreparedTextWithSegments,
+        b: PreparedTextWithSegments,
+        spacingPx: number = 0,
+    ): PreparedTextWithSegments {
+        const unified: PreparedTextWithSegments = { ...a };
+
+        unified.widths = a.widths.map((w, i) => Math.max(w, b.widths[i]) + spacingPx);
+        unified.lineEndFitAdvances = a.lineEndFitAdvances.map((w, i) =>
+            Math.max(w, b.lineEndFitAdvances[i]) + spacingPx
+        );
+        unified.lineEndPaintAdvances = a.lineEndPaintAdvances.map((w, i) =>
+            Math.max(w, b.lineEndPaintAdvances[i]) + spacingPx
+        );
+
+        unified.breakableFitAdvances = a.breakableFitAdvances.map((advA, i) => {
+            const advB = b.breakableFitAdvances[i];
+            if (!advA && !advB) {
+                return null;
+            }
+            if (!advA) {
+                return advB!.map(w => w + spacingPx);
+            }
+            if (!advB) {
+                return advA.map(w => w + spacingPx);
+            }
+            return advA.map((w, j) => Math.max(w, advB[j]) + spacingPx);
+        });
+
+        return unified;
+    }
+}
diff --git a/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.test.ts
new file mode 100644
index 0000000..e378393
--- /dev/null
+++ b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -0,0 +1,220 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
+import {
+    type LineRenderModel,
+    computeLineRenderModel,
+    findSplitIndex,
+} from './computeLineRenderModel';
+
+/**
+ * Build a ComparisonLine fixture with given per-char widths. xA/xB are
+ * cumulative prefix sums of widthA/widthB respectively.
+ */
+function makeLine(
+    chars: { char: string; widthA: number; widthB: number }[],
+): ComparisonLine {
+    let xA = 0;
+    let xB = 0;
+    const out: ComparisonLine = {
+        text: chars.map(c => c.char).join(''),
+        width: chars.reduce((s, c) => s + Math.max(c.widthA, c.widthB), 0),
+        chars: chars.map(c => {
+            const entry = {
+                char: c.char,
+                xA,
+                xB,
+                widthA: c.widthA,
+                widthB: c.widthB,
+            };
+            xA += c.widthA;
+            xB += c.widthB;
+            return entry;
+        }),
+    };
+    return out;
+}
+
+/**
+ * Test helper: compute split + render model in one step, matching the
+ * SliderArea call site shape.
+ */
+function compute(
+    line: ComparisonLine,
+    sliderPos: number,
+    containerWidth: number,
+    windowSize: number,
+): LineRenderModel {
+    const split = findSplitIndex(line, sliderPos, containerWidth);
+    return computeLineRenderModel(line, split, windowSize);
+}
+
+describe('computeLineRenderModel', () => {
+    it('returns empty model for an empty line', () => {
+        const line = makeLine([]);
+        const model = compute(line, 50, 500, 5);
+        expect(model.leftText).toBe('');
+        expect(model.windowChars).toEqual([]);
+        expect(model.rightText).toBe('');
+    });
+
+    it('places entire line in rightText when slider is at 0', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        const model = compute(line, 0, 500, 0);
+        expect(model.leftText).toBe('');
+        expect(model.windowChars).toEqual([]);
+        expect(model.rightText).toBe('ABC');
+    });
+
+    it('places entire line in leftText when slider is at 100', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        const model = compute(line, 100, 500, 0);
+        expect(model.leftText).toBe('ABC');
+        expect(model.windowChars).toEqual([]);
+        expect(model.rightText).toBe('');
+    });
+
+    it('splits line correctly with slider mid-line (window=0)', () => {
+        // Equal widths → line is centered. Container=300, total=30 → xOffset=135.
+        // Char thresholds (per the threshold formula in the design):
+        //   threshold[i] = xOffset + prefA[i] + widthA[i]/2
+        //   i=0: 135 + 0  + 5  = 140  → 140/300 = 46.67%
+        //   i=1: 135 + 10 + 5  = 150  → 150/300 = 50.00%
+        //   i=2: 135 + 20 + 5  = 160  → 160/300 = 53.33%
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        // Slider just past B's threshold (50%) but not C's (53.33%).
+        const model = compute(line, 51, 300, 0);
+        expect(model.leftText).toBe('AB');
+        expect(model.rightText).toBe('C');
+    });
+
+    it('centers window of size 3 on the split index', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+            { char: 'D', widthA: 10, widthB: 10 },
+            { char: 'E', widthA: 10, widthB: 10 },
+        ]);
+        // Slider past A and B (~thresholds 43.33%, 46.67%); not past C (50%).
+        // split = 2 → halfWindow = 1 → windowStart = 1, windowEnd = 4
+        const model = compute(line, 48, 300, 3);
+        expect(model.leftText).toBe('A');
+        expect(model.windowChars.map(w => w.char)).toEqual(['B', 'C', 'D']);
+        expect(model.rightText).toBe('E');
+    });
+
+    it('clamps window at line start when slider is near 0', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+            { char: 'D', widthA: 10, widthB: 10 },
+            { char: 'E', widthA: 10, widthB: 10 },
+        ]);
+        const model = compute(line, 0, 300, 3);
+        expect(model.leftText).toBe('');
+        expect(model.windowChars.map(w => w.char)).toEqual(['A', 'B', 'C']);
+        expect(model.rightText).toBe('DE');
+    });
+
+    it('clamps window at line end when slider is near 100', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+            { char: 'D', widthA: 10, widthB: 10 },
+            { char: 'E', widthA: 10, widthB: 10 },
+        ]);
+        const model = compute(line, 100, 300, 3);
+        expect(model.leftText).toBe('AB');
+        expect(model.windowChars.map(w => w.char)).toEqual(['C', 'D', 'E']);
+        expect(model.rightText).toBe('');
+    });
+
+    it('treats whole line as window when line is shorter than windowSize', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+        ]);
+        const model = compute(line, 50, 300, 5);
+        expect(model.leftText).toBe('');
+        expect(model.windowChars.map(w => w.char)).toEqual(['A', 'B']);
+        expect(model.rightText).toBe('');
+    });
+
+    it('produces stable keys across slider movement within the same line', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+            { char: 'D', widthA: 10, widthB: 10 },
+            { char: 'E', widthA: 10, widthB: 10 },
+        ]);
+        const a = compute(line, 40, 300, 3);
+        const b = compute(line, 60, 300, 3);
+        // Chars that appear in both windows must carry identical keys.
+        for (const charA of a.windowChars) {
+            const charB = b.windowChars.find(w => w.char === charA.char);
+            if (charB !== undefined) {
+                expect(charB.key).toBe(charA.key);
+            }
+        }
+    });
+
+    it('marks isPast=true for chars before the split and false for chars after', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+            { char: 'D', widthA: 10, widthB: 10 },
+            { char: 'E', widthA: 10, widthB: 10 },
+        ]);
+        // split = 2 → A,B past; C,D,E not
+        const model = compute(line, 48, 300, 5);
+        const expected = new Map([['A', true], ['B', true], ['C', false], ['D', false], ['E', false]]);
+        for (const wc of model.windowChars) {
+            expect(wc.isPast).toBe(expected.get(wc.char));
+        }
+    });
+});
+
+describe('findSplitIndex', () => {
+    it('returns 0 for empty line', () => {
+        const line = makeLine([]);
+        expect(findSplitIndex(line, 50, 500)).toBe(0);
+    });
+
+    it('returns 0 when slider is before all char thresholds', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        expect(findSplitIndex(line, 0, 300)).toBe(0);
+    });
+
+    it('returns chars.length when slider is past all char thresholds', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        expect(findSplitIndex(line, 100, 300)).toBe(3);
+    });
+});
diff --git a/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.ts
new file mode 100644
index 0000000..c7e0a63
--- /dev/null
+++ b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.ts
@@ -0,0 +1,133 @@
+import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
+
+/**
+ * Per-line render slice consumed by Line.svelte. The window is centered on the
+ * slider's split index and clamps at line boundaries.
+ */
+export interface LineRenderModel {
+    /**
+     * Chars before the window joined into a single string, rendered as one fontA text run.
+     */
+    leftText: string;
+    /**
+     * Window chars — each rendered as its own Character element with crossfade slots.
+     */
+    windowChars: Array<{
+        /**
+         * Stable key for Svelte keyed each — survives slider movement within the same line.
+         */
+        key: string;
+        /**
+         * Grapheme cluster to render.
+         */
+        char: string;
+        /**
+         * True once the slider has crossed this char's threshold.
+         */
+        isPast: boolean;
+    }>;
+    /**
+     * Chars after the window joined into a single string, rendered as one fontB text run.
+     */
+    rightText: string;
+}
+
+/**
+ * Returns the count of chars whose flip threshold the slider has crossed.
+ *
+ * Exposed as a separate step so consumers can pass the resulting primitive
+ * `split` across component boundaries: when split is unchanged tick-to-tick,
+ * downstream `$derived` reads of `computeLineRenderModel(line, split, ...)`
+ * short-circuit on value equality and skip re-rendering.
+ *
+ * For each candidate split `i`, the line's hypothetical width at that moment is
+ * `prefA[i] + widthA[i] + sufB[i+1]` (past chars in fontA, char `i` flipping, future
+ * chars in fontB). The threshold is the x of char `i`'s center in the centered line.
+ * Thresholds are monotonically non-decreasing in `i`, so the scan short-circuits on
+ * the first miss.
+ */
+export function findSplitIndex(
+    line: ComparisonLine,
+    sliderPos: number,
+    containerWidth: number,
+): number {
+    const chars = line.chars;
+    const n = chars.length;
+    if (n === 0) {
+        return 0;
+    }
+    const sliderX = (sliderPos / 100) * containerWidth;
+
+    const prefA = new Float64Array(n + 1);
+    const sufB = new Float64Array(n + 1);
+    for (let i = 0, j = n - 1; i < n; i++, j--) {
+        prefA[i + 1] = prefA[i] + chars[i].widthA;
+        sufB[j] = sufB[j + 1] + chars[j].widthB;
+    }
+
+    let split = 0;
+    for (let i = 0; i < n; i++) {
+        const totalWidth = prefA[i] + chars[i].widthA + sufB[i + 1];
+        const xOffset = (containerWidth - totalWidth) / 2;
+        const threshold = xOffset + prefA[i] + chars[i].widthA / 2;
+        if (sliderX > threshold) {
+            split = i + 1;
+        } else {
+            break;
+        }
+    }
+    return split;
+}
+
+/**
+ * Slices a laid-out line into three regions around a precomputed split index:
+ * a fontA bulk run, an N-char crossfade window, and a fontB bulk run.
+ *
+ * Pure and allocation-bounded: two strings plus a `windowSize`-length array per call.
+ * Takes `split` as a primitive so callers can feed it into a `$derived` and
+ * skip re-evaluation on ticks where the split index is unchanged.
+ *
+ * @param line       Line from `DualFontLayout.layout()`. Empty `chars` yields an empty model.
+ * @param split      Count of chars the slider has passed, in `[0, line.chars.length]`.
+ * @param windowSize Number of chars in the crossfade window. Clamped to `[0, line.chars.length]`.
+ *                   At line edges the window is shifted (not shrunk) to keep its size.
+ */
+export function computeLineRenderModel(
+    line: ComparisonLine,
+    split: number,
+    windowSize: number,
+): LineRenderModel {
+    const chars = line.chars;
+    const n = chars.length;
+    if (n === 0) {
+        return { leftText: '', windowChars: [], rightText: '' };
+    }
+
+    const halfWindow = Math.floor(Math.max(0, windowSize) / 2);
+    let windowStart = clamp(split - halfWindow, 0, n);
+    let windowEnd = clamp(windowStart + Math.max(0, windowSize), 0, n);
+    windowStart = Math.max(0, windowEnd - Math.max(0, windowSize));
+
+    const leftText = chars.slice(0, windowStart).map(c => c.char).join('');
+    const rightText = chars.slice(windowEnd).map(c => c.char).join('');
+    const windowChars = chars.slice(windowStart, windowEnd).map((c, idx) => ({
+        key: `${windowStart + idx}-${c.char}`,
+        char: c.char,
+        isPast: (windowStart + idx) < split,
+    }));
+
+    return { leftText, windowChars, rightText };
+}
+
+/**
+ * Clamps `value` into the inclusive range `[lo, hi]`. Assumes `lo <= hi`.
+ */
+function clamp(value: number, lo: number, hi: number): number {
+    if (value < lo) {
+        return lo;
+    }
+    if (value > hi) {
+        return hi;
+    }
+    return value;
+}
diff --git a/src/entities/Font/domain/index.ts b/src/entities/Font/domain/index.ts
new file mode 100644
index 0000000..bffc09f
--- /dev/null
+++ b/src/entities/Font/domain/index.ts
@@ -0,0 +1,10 @@
+export {
+    type ComparisonLine,
+    type ComparisonResult,
+    DualFontLayout,
+} from './DualFontLayout/DualFontLayout';
+export {
+    computeLineRenderModel,
+    findSplitIndex,
+    type LineRenderModel,
+} from './computeLineRenderModel/computeLineRenderModel';
diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index b441d65..b93f0fc 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -1,4 +1,92 @@
-export * from './api';
-export * from './lib';
-export * from './model';
-export * from './ui';
+export {
+    computeLineRenderModel,
+    DualFontLayout,
+    findSplitIndex,
+} from './domain';
+export type {
+    ComparisonLine,
+    ComparisonResult,
+    LineRenderModel,
+} from './domain';
+
+export {
+    createFontRowSizeResolver,
+    FontNetworkError,
+    FontResponseError,
+    getFontUrl,
+} from './lib';
+export type { FontRowSizeResolverOptions } from './lib';
+
+export {
+    FontApplicator,
+    FontSampler,
+    FontVirtualList,
+} from './ui';
+
+// Pure model surface (types + constants).
+export {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    FONT_SIZE_STEP,
+    FONT_WEIGHT_STEP,
+    LETTER_SPACING_STEP,
+    LINE_HEIGHT_STEP,
+    MAX_FONT_SIZE,
+    MAX_FONT_WEIGHT,
+    MAX_LETTER_SPACING,
+    MAX_LINE_HEIGHT,
+    MIN_FONT_SIZE,
+    MIN_FONT_WEIGHT,
+    MIN_LETTER_SPACING,
+    MIN_LINE_HEIGHT,
+    VIRTUAL_INDEX_NOT_LOADED,
+} from './model/const/const';
+export type {
+    FilterGroup,
+    FilterType,
+    FontCategory,
+    FontCollectionFilters,
+    FontCollectionSort,
+    FontCollectionState,
+    FontFeatures,
+    FontFilters,
+    FontLoadRequestConfig,
+    FontLoadStatus,
+    FontMetadata,
+    FontProvider,
+    FontStyleUrls,
+    FontSubset,
+    FontVariant,
+    FontWeight,
+    FontWeightItalic,
+    UnifiedFont,
+    UnifiedFontVariant,
+} from './model/types';
+
+/*
+ * Stores are exposed as lazy accessors / classes (not eager singletons): the
+ * entity's public API is complete, so consumers go through this barrel instead
+ * of deep-importing `./model` (FSD public-API boundary). Construction happens on
+ * first call, so this is inert at import. The slice root already transitively
+ * loads `@tanstack/query-core` via `./ui` (FontVirtualList), so surfacing the
+ * stores here adds no new eager cost.
+ */
+export {
+    FontLifecycleManager,
+    FontsByIdsStore,
+    getFontCatalog,
+    getFontLifecycleManager,
+} from './model';
+export type { FontCatalogStore } from './model';
+
+/*
+ * `./api` (proxy clients: `fetchProxyFonts`, `seedFontCache`, …) is intentionally
+ * NOT re-exported here — those are not part of the entity's consumed surface and
+ * importing them eagerly constructs the TanStack `queryClient`. Import via the
+ * segment: `import { fetchProxyFonts } from '$entities/Font/api'`.
+ */
+
+// `./testing` is intentionally not re-exported: fixtures must not leak into the
+// production public API. Import them via `$entities/Font/testing`.
diff --git a/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.test.ts b/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.test.ts
new file mode 100644
index 0000000..ef196d4
--- /dev/null
+++ b/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.test.ts
@@ -0,0 +1,111 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import type { UnifiedFont } from '../../model/types';
+import { createFontLoadRequestContfig } from './createFontLoadRequestContfig';
+
+/**
+ * Minimal UnifiedFont mock — override only the fields a case exercises.
+ */
+function createMockFont(overrides: Partial<UnifiedFont> = {}): UnifiedFont {
+    const baseFont: UnifiedFont = {
+        id: 'test-font',
+        name: 'Test Font',
+        provider: 'google',
+        category: 'sans-serif',
+        subsets: ['latin'],
+        variants: [],
+        styles: {},
+        metadata: {
+            cachedAt: Date.now(),
+        },
+        features: {
+            isVariable: false,
+            tags: [],
+        },
+    };
+
+    return { ...baseFont, ...overrides };
+}
+
+describe('createFontLoadRequestContfig', () => {
+    it('builds a single-element config when a URL resolves', () => {
+        const font = createMockFont({
+            id: 'roboto',
+            name: 'Roboto',
+            styles: { variants: { '400': 'https://example.com/roboto-400.woff2' } },
+        });
+
+        const result = createFontLoadRequestContfig(font, 400);
+
+        expect(result).toEqual([
+            {
+                id: 'roboto',
+                name: 'Roboto',
+                weight: 400,
+                url: 'https://example.com/roboto-400.woff2',
+                isVariable: false,
+            },
+        ]);
+    });
+
+    it('returns an empty array when no URL resolves (flatMap drops the font)', () => {
+        const font = createMockFont({ styles: {} });
+
+        expect(createFontLoadRequestContfig(font, 400)).toEqual([]);
+    });
+
+    it('forwards isVariable from font features', () => {
+        const font = createMockFont({
+            features: { isVariable: true, tags: [] },
+            styles: { variants: { '700': 'https://example.com/inter-vf.woff2' } },
+        });
+
+        const [config] = createFontLoadRequestContfig(font, 700);
+
+        expect(config.isVariable).toBe(true);
+    });
+
+    it('sets isVariable to undefined when features is absent', () => {
+        // features is non-optional on UnifiedFont, but upstream data can be partial —
+        // the optional chain must not throw, and isVariable stays undefined.
+        const font = createMockFont({
+            styles: { variants: { '400': 'https://example.com/font.woff2' } },
+        });
+        // @ts-expect-error — deliberately drop the guaranteed field to exercise the optional chain
+        font.features = undefined;
+
+        const [config] = createFontLoadRequestContfig(font, 400);
+
+        expect(config.isVariable).toBeUndefined();
+    });
+
+    it('uses the resolved fallback URL, not just exact matches', () => {
+        // getFontUrl falls back to styles.regular when the exact weight is missing;
+        // the config must carry whatever URL actually resolved.
+        const font = createMockFont({
+            styles: { regular: 'https://example.com/font-regular.woff2' },
+        });
+
+        const [config] = createFontLoadRequestContfig(font, 900);
+
+        expect(config.url).toBe('https://example.com/font-regular.woff2');
+        expect(config.weight).toBe(900);
+    });
+
+    it('carries the requested weight even when the URL is a shared fallback', () => {
+        const font = createMockFont({
+            styles: { variants: { '400': 'https://example.com/shared.woff2' } },
+        });
+
+        expect(createFontLoadRequestContfig(font, 700)[0].weight).toBe(700);
+    });
+
+    it('propagates the invalid-weight error from getFontUrl', () => {
+        const font = createMockFont();
+
+        expect(() => createFontLoadRequestContfig(font, 450)).toThrow('Invalid weight: 450');
+    });
+});
diff --git a/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.ts b/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.ts
new file mode 100644
index 0000000..b0aad4c
--- /dev/null
+++ b/src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.ts
@@ -0,0 +1,33 @@
+import type {
+    FontLoadRequestConfig,
+    UnifiedFont,
+} from '../../model';
+import { getFontUrl } from '../getFontUrl/getFontUrl';
+
+/**
+ * Build the font-lifecycle load request for a single font at a given weight.
+ *
+ * Returns a 0-or-1 element array rather than `FontLoadRequestConfig | undefined`
+ * so call sites can `flatMap` over a font list — resolve the URL and drop fonts
+ * that have none in a single pass, with no separate filter step. An empty array
+ * means the font has no loadable asset for this weight (or its fallbacks) and is
+ * silently skipped.
+ *
+ * `isVariable` is forwarded from the font's features so the lifecycle manager can
+ * dedupe variable fonts per ID (they load once regardless of weight) while still
+ * loading static fonts per weight.
+ *
+ * @param font - Unified font to load
+ * @param weight - Numeric weight (100-900)
+ * @returns Single-element config array, or `[]` when no URL resolves
+ * @throws Error when weight is outside the valid 100-900 range (propagated from `getFontUrl`)
+ */
+export function createFontLoadRequestContfig(font: UnifiedFont, weight: number): FontLoadRequestConfig[] {
+    const url = getFontUrl(font, weight);
+
+    if (!url) {
+        return [];
+    }
+
+    return [{ id: font.id, name: font.name, weight, url, isVariable: font.features?.isVariable }];
+}
diff --git a/src/entities/Font/lib/errors/errors.ts b/src/entities/Font/lib/errors/errors.ts
index 4702c8a..0f057c2 100644
--- a/src/entities/Font/lib/errors/errors.ts
+++ b/src/entities/Font/lib/errors/errors.ts
@@ -1,4 +1,4 @@
-import { NonRetryableError } from '$shared/api/queryClient';
+import { NonRetryableError } from '$shared/api/nonRetryableError';
 
 /**
  * Thrown when the network request to the proxy API fails.
diff --git a/src/entities/Font/lib/index.ts b/src/entities/Font/lib/index.ts
index 161c396..000c5f7 100644
--- a/src/entities/Font/lib/index.ts
+++ b/src/entities/Font/lib/index.ts
@@ -1,49 +1,5 @@
 export { getFontUrl } from './getFontUrl/getFontUrl';
 
-// Mock data helpers for Storybook and testing
-export {
-    createCategoriesFilter,
-    createErrorState,
-    createGenericFilter,
-    createLoadingState,
-    createMockComparisonStore,
-    // Filter mocks
-    createMockFilter,
-    createMockFontApiResponse,
-    createMockFontStoreState,
-    // Store mocks
-    createMockQueryState,
-    createMockReactiveState,
-    createMockStore,
-    createProvidersFilter,
-    createSubsetsFilter,
-    createSuccessState,
-    generateMixedCategoryFonts,
-    generateMockFonts,
-    generatePaginatedFonts,
-    generateSequentialFilter,
-    GENERIC_FILTERS,
-    getAllMockFonts,
-    getFontsByCategory,
-    getFontsByProvider,
-    MOCK_FILTERS,
-    MOCK_FILTERS_ALL_SELECTED,
-    MOCK_FILTERS_EMPTY,
-    MOCK_FILTERS_SELECTED,
-    MOCK_FONT_STORE_STATES,
-    MOCK_STORES,
-    type MockFilterOptions,
-    type MockFilters,
-    type MockFontStoreState,
-    // Font mocks
-    // Types
-    type MockQueryObserverResult,
-    type MockQueryState,
-    mockUnifiedFont,
-    type MockUnifiedFontOptions,
-    UNIFIED_FONTS,
-} from './mocks';
-
 export {
     FontNetworkError,
     FontResponseError,
diff --git a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
index a274b40..9913be1 100644
--- a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
+++ b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
@@ -14,6 +14,7 @@ vi.mock('@chenglou/pretext', async () => {
         layout: vi.fn(actual.layout),
     };
 });
+import { mockUnifiedFont } from '$entities/Font/testing';
 import {
     beforeEach,
     describe,
@@ -22,7 +23,6 @@ import {
     vi,
 } from 'vitest';
 import type { FontLoadStatus } from '../../model/types';
-import { mockUnifiedFont } from '../mocks';
 import { createFontRowSizeResolver } from './createFontRowSizeResolver';
 
 // Fixed-width canvas mock: every character is 10px wide regardless of font.
diff --git a/src/entities/Font/model/const/const.ts b/src/entities/Font/model/const/const.ts
index 971dca4..9503e20 100644
--- a/src/entities/Font/model/const/const.ts
+++ b/src/entities/Font/model/const/const.ts
@@ -1,6 +1,3 @@
-import type { ControlModel } from '$shared/lib';
-import type { ControlId } from '../types/typography';
-
 /**
  * Font size constants
  */
@@ -33,60 +30,6 @@ export const MIN_LETTER_SPACING = -0.1;
 export const MAX_LETTER_SPACING = 0.5;
 export const LETTER_SPACING_STEP = 0.01;
 
-export const DEFAULT_TYPOGRAPHY_CONTROLS_DATA: ControlModel<ControlId>[] = [
-    {
-        id: 'font_size',
-        value: DEFAULT_FONT_SIZE,
-        max: MAX_FONT_SIZE,
-        min: MIN_FONT_SIZE,
-        step: FONT_SIZE_STEP,
-
-        increaseLabel: 'Increase Font Size',
-        decreaseLabel: 'Decrease Font Size',
-        controlLabel: 'Size',
-    },
-    {
-        id: 'font_weight',
-        value: DEFAULT_FONT_WEIGHT,
-        max: MAX_FONT_WEIGHT,
-        min: MIN_FONT_WEIGHT,
-        step: FONT_WEIGHT_STEP,
-
-        increaseLabel: 'Increase Font Weight',
-        decreaseLabel: 'Decrease Font Weight',
-        controlLabel: 'Weight',
-    },
-    {
-        id: 'line_height',
-        value: DEFAULT_LINE_HEIGHT,
-        max: MAX_LINE_HEIGHT,
-        min: MIN_LINE_HEIGHT,
-        step: LINE_HEIGHT_STEP,
-
-        increaseLabel: 'Increase Line Height',
-        decreaseLabel: 'Decrease Line Height',
-        controlLabel: 'Leading',
-    },
-    {
-        id: 'letter_spacing',
-        value: DEFAULT_LETTER_SPACING,
-        max: MAX_LETTER_SPACING,
-        min: MIN_LETTER_SPACING,
-        step: LETTER_SPACING_STEP,
-
-        increaseLabel: 'Increase Letter Spacing',
-        decreaseLabel: 'Decrease Letter Spacing',
-        controlLabel: 'Tracking',
-    },
-];
-
-/**
- * Font size multipliers
- */
-export const MULTIPLIER_S = 0.5;
-export const MULTIPLIER_M = 0.75;
-export const MULTIPLIER_L = 1;
-
 /**
  * Index value for items not yet loaded in a virtualized list.
  * Treated as being at the very bottom of the infinite scroll.
diff --git a/src/entities/Font/model/index.ts b/src/entities/Font/model/index.ts
index 8749b29..d605aeb 100644
--- a/src/entities/Font/model/index.ts
+++ b/src/entities/Font/model/index.ts
@@ -1,3 +1,51 @@
-export * from './const/const';
-export * from './store';
-export * from './types';
+export {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    FONT_SIZE_STEP,
+    FONT_WEIGHT_STEP,
+    LETTER_SPACING_STEP,
+    LINE_HEIGHT_STEP,
+    MAX_FONT_SIZE,
+    MAX_FONT_WEIGHT,
+    MAX_LETTER_SPACING,
+    MAX_LINE_HEIGHT,
+    MIN_FONT_SIZE,
+    MIN_FONT_WEIGHT,
+    MIN_LETTER_SPACING,
+    MIN_LINE_HEIGHT,
+    VIRTUAL_INDEX_NOT_LOADED,
+} from './const/const';
+
+// Stores (lazy accessors + classes)
+export {
+    __resetFontLifecycleManager,
+    FontLifecycleManager,
+    FontsByIdsStore,
+    getFontCatalog,
+    getFontLifecycleManager,
+} from './store';
+export type { FontCatalogStore } from './store';
+
+export type {
+    FilterGroup,
+    FilterType,
+    FontCategory,
+    FontCollectionFilters,
+    FontCollectionSort,
+    FontCollectionState,
+    FontFeatures,
+    FontFilters,
+    FontLoadRequestConfig,
+    FontLoadStatus,
+    FontMetadata,
+    FontProvider,
+    FontStyleUrls,
+    FontSubset,
+    FontVariant,
+    FontWeight,
+    FontWeightItalic,
+    UnifiedFont,
+    UnifiedFontVariant,
+} from './types';
diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
index 07a4edb..278e8e0 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -1,4 +1,7 @@
-import { QueryClient } from '@tanstack/query-core';
+import {
+    generateMixedCategoryFonts,
+    generateMockFonts,
+} from '$entities/Font/testing';
 import { flushSync } from 'svelte';
 import {
     afterEach,
@@ -12,27 +15,33 @@ import {
     FontNetworkError,
     FontResponseError,
 } from '../../../lib/errors/errors';
-import {
-    generateMixedCategoryFonts,
-    generateMockFonts,
-} from '../../../lib/mocks/fonts.mock';
 import type { UnifiedFont } from '../../types';
 import { FontCatalogStore } from './fontCatalogStore.svelte';
 
 vi.mock('$shared/api/queryClient', async importOriginal => {
+    /**
+     * Import QueryClient inside the factory rather than referencing the top-level binding.
+     * A hoisted vi.mock factory that touches a module-level import can hit that import
+     * before it is initialized (ReferenceError) when the import sits in a circular/eager
+     * barrel chain — which it now does via $shared/lib → BaseQueryStore → query-core.
+     */
+    const { QueryClient } = await import('@tanstack/query-core');
     const actual = await importOriginal<typeof import('$shared/api/queryClient')>();
+    const mockClient = new QueryClient({
+        defaultOptions: { queries: { retry: 0, gcTime: 0 } },
+    });
     return {
         ...actual,
-        queryClient: new QueryClient({
-            defaultOptions: { queries: { retry: 0, gcTime: 0 } },
-        }),
+        getQueryClient: () => mockClient,
     };
 });
 vi.mock('../../../api', () => ({ fetchProxyFonts: vi.fn() }));
 
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
 import { fetchProxyFonts } from '../../../api';
 
+const queryClient = getQueryClient();
+
 const fetch = fetchProxyFonts as ReturnType<typeof vi.fn>;
 
 type FontPage = { fonts: UnifiedFont[]; total: number; limit: number; offset: number };
diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
index c6d7510..4d2b96c 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -1,8 +1,9 @@
 import {
     DEFAULT_QUERY_GC_TIME_MS,
     DEFAULT_QUERY_STALE_TIME_MS,
-    queryClient,
+    getQueryClient,
 } from '$shared/api/queryClient';
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
 import {
     type InfiniteData,
     InfiniteQueryObserver,
@@ -46,7 +47,7 @@ export class FontCatalogStore {
         readonly unknown[],
         PageParam
     >;
-    #qc = queryClient;
+    #qc = getQueryClient();
     #unsubscribe: () => void;
 
     constructor(params: FontStoreParams = {}) {
@@ -483,8 +484,12 @@ export class FontCatalogStore {
     }
 }
 
-export function createFontCatalogStore(params: FontStoreParams = {}): FontCatalogStore {
-    return new FontCatalogStore(params);
-}
+const catalog = createSingleton(
+    () => new FontCatalogStore({ limit: 50 }),
+    instance => instance.destroy(),
+);
 
-export const fontCatalogStore = new FontCatalogStore({ limit: 50 });
+export const getFontCatalog = catalog.get;
+
+// test-only reset, so specs don't share a live observer
+export const __resetFontCatalog = catalog.reset;
diff --git a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
index 9439a87..3a19af5 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
@@ -1,3 +1,4 @@
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
 import { SvelteMap } from 'svelte/reactivity';
 import {
     type FontLoadRequestConfig,
@@ -420,6 +421,15 @@ export class FontLifecycleManager {
 }
 
 /**
- * Singleton instance — use throughout the application for unified font loading state.
+ * App-wide font lifecycle manager, created on first access. Lazy so its
+ * AbortController / FontFace bookkeeping isn't set up at module load.
  */
-export const fontLifecycleManager = new FontLifecycleManager();
+const fontLifecycleManager = createSingleton(
+    () => new FontLifecycleManager(),
+    instance => instance.destroy(),
+);
+
+export const getFontLifecycleManager = fontLifecycleManager.get;
+
+// test-only reset, so specs don't share loaded-font/eviction state
+export const __resetFontLifecycleManager = fontLifecycleManager.reset;
diff --git a/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts
index f44b289..3cc7bc1 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts
@@ -71,7 +71,7 @@ describe('loadFont', () => {
     it('throws FontParseError when font.load() rejects', async () => {
         const loadError = new Error('parse failed');
         const MockFontFace = vi.fn(
-            function(this: any, name: string, buffer: BufferSource, options: FontFaceDescriptors) {
+            function(this: any, _name: string, _buffer: BufferSource, _options: FontFaceDescriptors) {
                 this.load = vi.fn().mockRejectedValue(loadError);
             },
         );
diff --git a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
similarity index 93%
rename from src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
rename to src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
index 9b177a8..4c83b83 100644
--- a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
+++ b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
@@ -1,14 +1,14 @@
+import { fontKeys } from '$shared/api/queryKeys';
+import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte';
 import {
     fetchFontsByIds,
     seedFontCache,
-} from '$entities/Font/api/proxy/proxyFonts';
+} from '../../../api/proxy/proxyFonts';
 import {
     FontNetworkError,
     FontResponseError,
-} from '$entities/Font/lib/errors/errors';
-import type { UnifiedFont } from '$entities/Font/model/types';
-import { fontKeys } from '$shared/api/queryKeys';
-import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore.svelte';
+} from '../../../lib/errors/errors';
+import type { UnifiedFont } from '../../types';
 
 /**
  * Internal fetcher that seeds the cache and handles error wrapping.
diff --git a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
similarity index 95%
rename from src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
rename to src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
index 7849535..16ce2fe 100644
--- a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
+++ b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
@@ -1,9 +1,6 @@
-import * as api from '$entities/Font/api/proxy/proxyFonts';
-import {
-    FontNetworkError,
-    FontResponseError,
-} from '$entities/Font/lib/errors/errors';
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import { fontKeys } from '$shared/api/queryKeys';
 import {
     beforeEach,
@@ -12,6 +9,11 @@ import {
     it,
     vi,
 } from 'vitest';
+import * as api from '../../../api/proxy/proxyFonts';
+import {
+    FontNetworkError,
+    FontResponseError,
+} from '../../../lib/errors/errors';
 import { FontsByIdsStore } from './fontsByIdsStore.svelte';
 
 describe('FontsByIdsStore', () => {
diff --git a/src/entities/Font/model/store/index.ts b/src/entities/Font/model/store/index.ts
index 97ebad0..3f05f83 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -1,9 +1,13 @@
 // Font lifecycle manager (browser-side load + cache + eviction)
-export * from './fontLifecycleManager/fontLifecycleManager.svelte';
+export {
+    __resetFontLifecycleManager,
+    FontLifecycleManager,
+    getFontLifecycleManager,
+} from './fontLifecycleManager/fontLifecycleManager.svelte';
 
 // Paginated catalog
-export {
-    createFontCatalogStore,
-    FontCatalogStore,
-    fontCatalogStore,
-} from './fontCatalogStore/fontCatalogStore.svelte';
+export { getFontCatalog } from './fontCatalogStore/fontCatalogStore.svelte';
+export type { FontCatalogStore } from './fontCatalogStore/fontCatalogStore.svelte';
+
+// Batch fetch by IDs (detail-cache seeding)
+export { FontsByIdsStore } from './fontsByIdsStore/fontsByIdsStore.svelte';
diff --git a/src/entities/Font/model/types/index.ts b/src/entities/Font/model/types/index.ts
index b23390c..18b2443 100644
--- a/src/entities/Font/model/types/index.ts
+++ b/src/entities/Font/model/types/index.ts
@@ -23,5 +23,7 @@ export type {
     FontCollectionState,
 } from './store';
 
-export * from './store/fontLifecycle';
-export * from './typography';
+export type {
+    FontLoadRequestConfig,
+    FontLoadStatus,
+} from './store/fontLifecycle';
diff --git a/src/entities/Font/model/types/typography.ts b/src/entities/Font/model/types/typography.ts
deleted file mode 100644
index 19104a2..0000000
--- a/src/entities/Font/model/types/typography.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
diff --git a/src/entities/Font/lib/mocks/filters.mock.ts b/src/entities/Font/testing/filters.mock.ts
similarity index 100%
rename from src/entities/Font/lib/mocks/filters.mock.ts
rename to src/entities/Font/testing/filters.mock.ts
diff --git a/src/entities/Font/lib/mocks/fonts.mock.ts b/src/entities/Font/testing/fonts.mock.ts
similarity index 95%
rename from src/entities/Font/lib/mocks/fonts.mock.ts
rename to src/entities/Font/testing/fonts.mock.ts
index a691dc7..0cf45fa 100644
--- a/src/entities/Font/lib/mocks/fonts.mock.ts
+++ b/src/entities/Font/testing/fonts.mock.ts
@@ -1,9 +1,5 @@
 /**
- * ============================================================================
- * MOCK FONT DATA
- * ============================================================================
- *
- * Factory functions and preset mock data for fonts.
+ * Mock font data: factory functions and preset fixtures.
  * Used in Storybook stories, tests, and development.
  *
  * ## Usage
@@ -16,7 +12,7 @@
  *     GOOGLE_FONTS,
  *     FONTHARE_FONTS,
  *     UNIFIED_FONTS,
- * } from '$entities/Font/lib/mocks';
+ * } from '$entities/Font/testing';
  *
  * // Create a mock Google Font
  * const roboto = mockGoogleFont({ family: 'Roboto', category: 'sans-serif' });
@@ -28,7 +24,7 @@
  * const font = mockUnifiedFont({ id: 'roboto', name: 'Roboto' });
  *
  * // Use preset fonts
- * import { UNIFIED_FONTS } from '$entities/Font/lib/mocks';
+ * import { UNIFIED_FONTS } from '$entities/Font/testing';
  * ```
  */
 
diff --git a/src/entities/Font/lib/mocks/index.ts b/src/entities/Font/testing/index.ts
similarity index 86%
rename from src/entities/Font/lib/mocks/index.ts
rename to src/entities/Font/testing/index.ts
index a9d5e5d..d82a724 100644
--- a/src/entities/Font/lib/mocks/index.ts
+++ b/src/entities/Font/testing/index.ts
@@ -1,8 +1,5 @@
 /**
- * ============================================================================
- * MOCK DATA HELPERS - MAIN EXPORT
- * ============================================================================
- *
+ * Mock data helpers (main export).
  * Comprehensive mock data for Storybook stories, tests, and development.
  *
  * ## Quick Start
@@ -13,7 +10,7 @@
  *     UNIFIED_FONTS,
  *     MOCK_FILTERS,
  *     createMockFontStoreState,
- * } from '$entities/Font/lib/mocks';
+ * } from '$entities/Font/testing';
  *
  * // Use in stories
  * const font = mockUnifiedFont({ name: 'My Font', category: 'serif' });
diff --git a/src/entities/Font/lib/mocks/stores.mock.ts b/src/entities/Font/testing/stores.mock.ts
similarity index 99%
rename from src/entities/Font/lib/mocks/stores.mock.ts
rename to src/entities/Font/testing/stores.mock.ts
index 030b581..02d29bc 100644
--- a/src/entities/Font/lib/mocks/stores.mock.ts
+++ b/src/entities/Font/testing/stores.mock.ts
@@ -8,7 +8,7 @@
  * import {
  *     createMockQueryState,
  *     MOCK_STORES,
- * } from '$entities/Font/lib/mocks';
+ * } from '$entities/Font/testing';
  *
  * // Create a mock query state
  * const loadingState = createMockQueryState({ status: 'pending' });
@@ -21,11 +21,7 @@
  */
 
 import type { UnifiedFont } from '$entities/Font/model/types';
-import type {
-    QueryKey,
-    QueryObserverResult,
-    QueryStatus,
-} from '@tanstack/svelte-query';
+import type { QueryStatus } from '@tanstack/svelte-query';
 import {
     UNIFIED_FONTS,
     generateMockFonts,
diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
index 0e370a6..92bb034 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
@@ -10,20 +10,20 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Loads a font and applies it to children. Shows blur/scale loading state until font is ready, then reveals with a smooth transition.',
+                    'Applies a font to its children based on the supplied load `status`. Renders the skeleton (or system font) until status is `loaded`/`error`, then reveals the font. The status is provided by the composing widget — the component does not read the lifecycle store itself.',
             },
             story: { inline: false },
         },
         layout: 'centered',
     },
     argTypes: {
-        weight: { control: 'number' },
+        status: { control: 'select', options: ['loading', 'loaded', 'error'] },
     },
 });
 </script>
 
 <script lang="ts">
-import { mockUnifiedFont } from '$entities/Font/lib/mocks';
+import { mockUnifiedFont } from '$entities/Font/testing';
 import type { ComponentProps } from 'svelte';
 
 const fontUnknown = mockUnifiedFont({ id: 'nonexistent-font-xk92z', name: 'Nonexistent Font Xk92z' });
@@ -39,11 +39,11 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
         docs: {
             description: {
                 story:
-                    'Font that has never been loaded by fontLifecycleManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
+                    'Status is `loading`: the font file has not resolved yet, so children render in the skeleton (or system font) fallback rather than the target font.',
             },
         },
     }}
-    args={{ font: fontUnknown, weight: 400 }}
+    args={{ font: fontUnknown, status: 'loading' }}
 >
     {#snippet template(args: ComponentProps<typeof FontApplicator>)}
         <FontApplicator {...args}>
@@ -58,11 +58,11 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
         docs: {
             description: {
                 story:
-                    'Uses Arial, a system font available in all browsers. Because fontLifecycleManager has not loaded it via FontFace, the manager status may remain pending — meaning the blur/scale state may still show. In a real app the manager would load the font and transition to the revealed state.',
+                    'Status is `loaded`: the component reveals the font, applying it to its children (Arial here, available in all browsers).',
             },
         },
     }}
-    args={{ font: fontArial, weight: 400 }}
+    args={{ font: fontArial, status: 'loaded' }}
 >
     {#snippet template(args: ComponentProps<typeof FontApplicator>)}
         <FontApplicator {...args}>
@@ -72,16 +72,16 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
 </Story>
 
 <Story
-    name="Custom Weight"
+    name="Error State"
     parameters={{
         docs: {
             description: {
                 story:
-                    'Demonstrates passing a custom weight (700). The weight is forwarded to fontLifecycleManager for font resolution; visually identical to the loaded state story until the manager confirms the font.',
+                    'Status is `error`: the font failed to load. The component still reveals (it treats `error` like `loaded` for reveal purposes) so children are not stuck behind the skeleton — they fall back to the system font.',
             },
         },
     }}
-    args={{ font: fontArialBold, weight: 700 }}
+    args={{ font: fontArialBold, status: 'error' }}
 >
     {#snippet template(args: ComponentProps<typeof FontApplicator>)}
         <FontApplicator {...args}>
diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
index ae1e97c..8ead202 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -6,11 +6,10 @@
 <script lang="ts">
 import { cn } from '$shared/lib';
 import type { Snippet } from 'svelte';
-import {
-    DEFAULT_FONT_WEIGHT,
-    type UnifiedFont,
-    fontLifecycleManager,
-} from '../../model';
+import type {
+    FontLoadStatus,
+    UnifiedFont,
+} from '../../model/types';
 
 interface Props {
     /**
@@ -18,10 +17,13 @@ interface Props {
      */
     font: UnifiedFont;
     /**
-     * Font weight
-     * @default 400
+     * Current load status for this font, supplied by the composing layer.
+     * Kept out of the component so it does not depend on (and import) the
+     * lifecycle store — the owning widget reads the manager and passes the
+     * resolved status down. `undefined` means the font is not tracked yet and
+     * is treated as not-yet-revealed (skeleton / system-font fallback).
      */
-    weight?: number;
+    status: FontLoadStatus | undefined;
     /**
      * CSS classes
      */
@@ -39,20 +41,12 @@ interface Props {
 
 let {
     font,
-    weight = DEFAULT_FONT_WEIGHT,
+    status,
     className,
     children,
     skeleton,
 }: Props = $props();
 
-const status = $derived(
-    fontLifecycleManager.getFontStatus(
-        font.id,
-        weight,
-        font.features?.isVariable,
-    ),
-);
-
 const shouldReveal = $derived(status === 'loaded' || status === 'error');
 </script>
 
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte b/src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
similarity index 82%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
index ffc2a3f..b01a5c8 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
@@ -4,7 +4,7 @@ import { defineMeta } from '@storybook/addon-svelte-csf';
 import FontSampler from './FontSampler.svelte';
 
 const { Story } = defineMeta({
-    title: 'Features/FontSampler',
+    title: 'Entities/Font/FontSampler',
     component: FontSampler,
     tags: ['autodocs'],
     parameters: {
@@ -21,6 +21,11 @@ const { Story } = defineMeta({
             control: 'object',
             description: 'Font information object',
         },
+        status: {
+            control: 'select',
+            options: ['loading', 'loaded', 'error'],
+            description: 'Font-load status, supplied by the composing widget and forwarded to FontApplicator',
+        },
         text: {
             control: 'text',
             description: 'Editable sample text (two-way bindable)',
@@ -34,8 +39,8 @@ const { Story } = defineMeta({
 </script>
 
 <script lang="ts">
-import type { UnifiedFont } from '$entities/Font';
 import type { ComponentProps } from 'svelte';
+import type { UnifiedFont } from '../../model/types';
 
 // Mock fonts for testing
 const mockArial: UnifiedFont = {
@@ -79,14 +84,24 @@ const mockGeorgia: UnifiedFont = {
         isVariable: false,
     },
 };
+
+// Stand-in for the AdjustTypography store the composing widget injects.
+const mockTypography = {
+    renderedSize: 48,
+    weight: 400,
+    height: 1.5,
+    spacing: 0,
+};
 </script>
 
 <Story
     name="Default"
     args={{
         font: mockArial,
+        status: 'loaded',
         text: 'The quick brown fox jumps over the lazy dog',
         index: 0,
+        typography: mockTypography,
     }}
 >
     {#snippet template(args: ComponentProps<typeof FontSampler>)}
@@ -101,9 +116,11 @@ const mockGeorgia: UnifiedFont = {
     name="Long Text"
     args={{
         font: mockGeorgia,
+        status: 'loaded',
         text:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
         index: 1,
+        typography: mockTypography,
     }}
 >
     {#snippet template(args: ComponentProps<typeof FontSampler>)}
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/entities/Font/ui/FontSampler/FontSampler.svelte
similarity index 68%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.svelte
index 614301b..98e82d5 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.svelte
@@ -4,11 +4,6 @@
     Visual design matches FontCard: sharp corners, red hover accent, header stats.
 -->
 <script lang="ts">
-import {
-    FontApplicator,
-    type UnifiedFont,
-} from '$entities/Font';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
 import {
     Badge,
     ContentEditable,
@@ -17,12 +12,47 @@ import {
     Stat,
 } from '$shared/ui';
 import { fly } from 'svelte/transition';
+import type {
+    FontLoadStatus,
+    UnifiedFont,
+} from '../../model/types';
+import FontApplicator from '../FontApplicator/FontApplicator.svelte';
+
+/**
+ * Minimal typography contract this view renders with. The AdjustTypography
+ * store satisfies it structurally; defining it here keeps the entity decoupled
+ * from that feature (no entity -> feature import).
+ */
+interface FontSampleTypography {
+    /**
+     * Rendered font size in px
+     */
+    renderedSize: number;
+    /**
+     * Numeric font weight
+     */
+    weight: number;
+    /**
+     * Line-height multiplier
+     */
+    height: number;
+    /**
+     * Letter spacing
+     */
+    spacing: number;
+}
 
 interface Props {
     /**
      * Font info
      */
     font: UnifiedFont;
+    /**
+     * Current font-load status, supplied by the composing widget so this
+     * component (and FontApplicator) stay decoupled from the lifecycle store.
+     * `undefined` means not tracked yet (treated as not-yet-revealed).
+     */
+    status: FontLoadStatus | undefined;
     /**
      * Sample text
      */
@@ -32,12 +62,15 @@ interface Props {
      * @default 0
      */
     index?: number;
+    /**
+     * Typography settings to render the sample with. Injected by the composing
+     * widget (which owns the AdjustTypography store) so this entity view stays
+     * decoupled from that feature — the same inversion as `status`.
+     */
+    typography: FontSampleTypography;
 }
 
-let { font, text = $bindable(), index = 0 }: Props = $props();
-
-// Adjust the property name to match your UnifiedFont type
-const fontType = $derived((font as any).type ?? (font as any).category ?? '');
+let { font, status, text = $bindable(), index = 0, typography }: Props = $props();
 
 // Extract provider badge with fallback
 const providerBadge = $derived(
@@ -46,10 +79,10 @@ const providerBadge = $derived(
 );
 
 const stats = $derived([
-    { label: 'SZ', value: `${typographySettingsStore.renderedSize}PX` },
-    { label: 'WGT', value: `${typographySettingsStore.weight}` },
-    { label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
-    { label: 'LTR', value: `${typographySettingsStore.spacing}` },
+    { label: 'SZ', value: `${typography.renderedSize}PX` },
+    { label: 'WGT', value: `${typography.weight}` },
+    { label: 'LH', value: typography.height.toFixed(2) },
+    { label: 'LTR', value: `${typography.spacing}` },
 ]);
 </script>
 
@@ -67,9 +100,8 @@ const stats = $derived([
         min-h-60
         rounded-none
     "
-    style:font-weight={typographySettingsStore.weight}
+    style:font-weight={typography.weight}
 >
-    <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
         class="
             flex items-center justify-between
@@ -91,9 +123,9 @@ const stats = $derived([
                 {font.name}
             </span>
 
-            {#if fontType}
+            {#if font?.category}
                 <Badge size="xs" variant="default" nowrap>
-                    {fontType}
+                    {font?.category}
                 </Badge>
             {/if}
 
@@ -130,19 +162,18 @@ const stats = $derived([
         </div>
     </div>
 
-    <!-- ── 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={typographySettingsStore.weight}>
+        <FontApplicator {font} {status}>
             <ContentEditable
                 bind:text
-                fontSize={typographySettingsStore.renderedSize}
-                lineHeight={typographySettingsStore.height}
-                letterSpacing={typographySettingsStore.spacing}
+                fontSize={typography.renderedSize}
+                lineHeight={typography.height}
+                letterSpacing={typography.spacing}
             />
         </FontApplicator>
     </div>
 
-    <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
+    <!-- Mobile stats footer; md:hidden because the header stats take over above -->
     <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-5xs sm:text-4xs tracking-wider {i === 0 ? 'ml-auto' : ''}">
@@ -154,7 +185,6 @@ const stats = $derived([
         {/each}
     </div>
 
-    <!-- ── Red hover line ─────────────────────────────────────────────── -->
     <div
         class="
             absolute bottom-0 left-0 right-0
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 0d21abe..4fdf6a5 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -5,21 +5,18 @@
 -->
 <script lang="ts">
 import { debounce } from '$shared/lib/utils';
-import {
-    Skeleton,
-    VirtualList,
-} from '$shared/ui';
+import { VirtualList } from '$shared/ui';
 import type {
     ComponentProps,
     Snippet,
 } from 'svelte';
 import { fade } from 'svelte/transition';
-import { getFontUrl } from '../../lib';
+import { createFontLoadRequestContfig } from '../../lib/createFontLoadRequestContfig/createFontLoadRequestContfig';
 import {
     type FontLoadRequestConfig,
     type UnifiedFont,
-    fontCatalogStore,
-    fontLifecycleManager,
+    getFontCatalog,
+    getFontLifecycleManager,
 } from '../../model';
 
 interface Props extends
@@ -55,17 +52,28 @@ let {
     ...rest
 }: Props = $props();
 
-const isLoading = $derived(
-    fontCatalogStore.isFetching || fontCatalogStore.isLoading,
-);
+const fontCatalog = getFontCatalog();
+const fontLifecycleManager = getFontLifecycleManager();
+
+const isLoading = $derived<boolean>(fontCatalog?.isLoading);
+const isFetching = $derived<boolean>(fontCatalog.isFetching);
+const hasMore = $derived<boolean>(fontCatalog?.pagination?.hasMore);
+const fonts = $derived<UnifiedFont[]>(fontCatalog.fonts);
+const total = $derived<number>(fontCatalog?.pagination.total);
 
 let visibleFonts = $state<UnifiedFont[]>([]);
-let isCatchingUp = $state(false);
+let isCatchingUp = $state<boolean>(false);
 
-const showInitialSkeleton = $derived(!!skeleton && isLoading && fontCatalogStore.fonts.length === 0);
-const showCatchupSkeleton = $derived(!!skeleton && isCatchingUp);
+const showInitialSkeleton = $derived.by(() => (
+    !!skeleton && (isLoading || isFetching) && fontCatalog.fonts.length === 0
+));
+const showCatchupSkeleton = $derived.by(() => (
+    !!skeleton && isCatchingUp
+));
 // Settled query with no matches — empty state replaces the (otherwise blank) list.
-const showEmpty = $derived(!!empty && !isLoading && !isCatchingUp && fontCatalogStore.fonts.length === 0);
+const showEmpty = $derived.by(() => (
+    !!empty && !(isLoading || isFetching) && !isCatchingUp && fontCatalog.fonts.length === 0
+));
 
 function handleInternalVisibleChange(items: UnifiedFont[]) {
     visibleFonts = items;
@@ -79,12 +87,12 @@ function handleInternalVisibleChange(items: UnifiedFont[]) {
  * font files for thousands of intermediate fonts.
  */
 async function handleJump(targetIndex: number) {
-    if (isCatchingUp || !fontCatalogStore.pagination.hasMore) {
+    if (isCatchingUp || !hasMore) {
         return;
     }
     isCatchingUp = true;
     try {
-        await fontCatalogStore.fetchAllPagesTo(targetIndex);
+        await fontCatalog.fetchAllPagesTo(targetIndex);
     } finally {
         isCatchingUp = false;
     }
@@ -105,13 +113,7 @@ $effect(() => {
     if (isCatchingUp) {
         return;
     }
-    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 }];
-    });
+    const configs = visibleFonts.flatMap(item => createFontLoadRequestContfig(item, weight));
     if (configs.length > 0) {
         debouncedTouch(configs);
     }
@@ -137,13 +139,11 @@ $effect(() => {
  * Load more fonts by moving to the next page
  */
 function loadMore() {
-    if (
-        !fontCatalogStore.pagination.hasMore
-        || fontCatalogStore.isFetching
-    ) {
+    if (!hasMore || isFetching) {
         return;
     }
-    fontCatalogStore.nextPage();
+
+    fontCatalog.nextPage();
 }
 
 /**
@@ -153,12 +153,10 @@ function loadMore() {
  * of the loaded items. Only fetches if there are more pages available.
  */
 function handleNearBottom(_lastVisibleIndex: number) {
-    const { hasMore } = fontCatalogStore.pagination;
-
     // VirtualList already checks if we're near the bottom of loaded items.
     // Guard isCatchingUp: fetchAllPagesTo bypasses TQ so isFetching stays false
     // during batch catch-up, which would otherwise let nextPage() race with it.
-    if (hasMore && !fontCatalogStore.isFetching && !isCatchingUp) {
+    if (hasMore && !isFetching && !isCatchingUp) {
         loadMore();
     }
 }
@@ -177,9 +175,9 @@ function handleNearBottom(_lastVisibleIndex: number) {
     {:else}
         <!-- VirtualList persists during pagination - no destruction/recreation -->
         <VirtualList
-            items={fontCatalogStore.fonts}
-            total={fontCatalogStore.pagination.total}
-            isLoading={isLoading || isCatchingUp}
+            items={fonts}
+            {total}
+            isLoading={isLoading || isFetching || isCatchingUp}
             onVisibleItemsChange={handleInternalVisibleChange}
             onNearBottom={handleNearBottom}
             onJump={handleJump}
diff --git a/src/entities/Font/ui/index.ts b/src/entities/Font/ui/index.ts
index 7dae687..2ba384f 100644
--- a/src/entities/Font/ui/index.ts
+++ b/src/entities/Font/ui/index.ts
@@ -1,7 +1,9 @@
 import FontApplicator from './FontApplicator/FontApplicator.svelte';
+import FontSampler from './FontSampler/FontSampler.svelte';
 import FontVirtualList from './FontVirtualList/FontVirtualList.svelte';
 
 export {
     FontApplicator,
+    FontSampler,
     FontVirtualList,
 };
diff --git a/src/features/AdjustTypography/index.ts b/src/features/AdjustTypography/index.ts
index da1afb9..28fe87c 100644
--- a/src/features/AdjustTypography/index.ts
+++ b/src/features/AdjustTypography/index.ts
@@ -1,6 +1,9 @@
 export {
     createTypographySettingsStore,
+    getTypographySettingsStore,
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
     type TypographySettingsStore,
-    typographySettingsStore,
 } from './model';
 export { TypographyMenu } from './ui';
diff --git a/src/features/AdjustTypography/model/const/const.ts b/src/features/AdjustTypography/model/const/const.ts
new file mode 100644
index 0000000..bd2680c
--- /dev/null
+++ b/src/features/AdjustTypography/model/const/const.ts
@@ -0,0 +1,76 @@
+import {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    FONT_SIZE_STEP,
+    FONT_WEIGHT_STEP,
+    LETTER_SPACING_STEP,
+    LINE_HEIGHT_STEP,
+    MAX_FONT_SIZE,
+    MAX_FONT_WEIGHT,
+    MAX_LETTER_SPACING,
+    MAX_LINE_HEIGHT,
+    MIN_FONT_SIZE,
+    MIN_FONT_WEIGHT,
+    MIN_LETTER_SPACING,
+    MIN_LINE_HEIGHT,
+} from '$entities/Font';
+import type {
+    ControlId,
+    ControlModel,
+} from '../types/typography';
+
+/**
+ * Responsive font-size scaling factors applied by typographySettingsStore.
+ */
+export const MULTIPLIER_S = 0.5;
+export const MULTIPLIER_M = 0.75;
+export const MULTIPLIER_L = 1;
+
+/**
+ * Default control definitions seeding the typography settings store.
+ * Composed from the font-render ranges/defaults owned by the Font entity.
+ */
+export const DEFAULT_TYPOGRAPHY_CONTROLS_DATA: ControlModel<ControlId>[] = [
+    {
+        id: 'font_size',
+        value: DEFAULT_FONT_SIZE,
+        max: MAX_FONT_SIZE,
+        min: MIN_FONT_SIZE,
+        step: FONT_SIZE_STEP,
+        increaseLabel: 'Increase Font Size',
+        decreaseLabel: 'Decrease Font Size',
+        controlLabel: 'Size',
+    },
+    {
+        id: 'font_weight',
+        value: DEFAULT_FONT_WEIGHT,
+        max: MAX_FONT_WEIGHT,
+        min: MIN_FONT_WEIGHT,
+        step: FONT_WEIGHT_STEP,
+        increaseLabel: 'Increase Font Weight',
+        decreaseLabel: 'Decrease Font Weight',
+        controlLabel: 'Weight',
+    },
+    {
+        id: 'line_height',
+        value: DEFAULT_LINE_HEIGHT,
+        max: MAX_LINE_HEIGHT,
+        min: MIN_LINE_HEIGHT,
+        step: LINE_HEIGHT_STEP,
+        increaseLabel: 'Increase Line Height',
+        decreaseLabel: 'Decrease Line Height',
+        controlLabel: 'Leading',
+    },
+    {
+        id: 'letter_spacing',
+        value: DEFAULT_LETTER_SPACING,
+        max: MAX_LETTER_SPACING,
+        min: MIN_LETTER_SPACING,
+        step: LETTER_SPACING_STEP,
+        increaseLabel: 'Increase Letter Spacing',
+        decreaseLabel: 'Decrease Letter Spacing',
+        controlLabel: 'Tracking',
+    },
+];
diff --git a/src/features/AdjustTypography/model/index.ts b/src/features/AdjustTypography/model/index.ts
index 67419fd..6e26ac4 100644
--- a/src/features/AdjustTypography/model/index.ts
+++ b/src/features/AdjustTypography/model/index.ts
@@ -1,5 +1,10 @@
+export {
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
+} from './const/const';
 export {
     createTypographySettingsStore,
+    getTypographySettingsStore,
     type TypographySettingsStore,
-    typographySettingsStore,
 } from './store/typographySettingsStore/typographySettingsStore.svelte';
diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 58eabd9..22576a9 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -11,22 +11,27 @@
  */
 
 import {
-    type ControlId,
     DEFAULT_FONT_SIZE,
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-} from '$entities/Font';
+    // Deep path (not the root barrel) on purpose: pulls only these pure
+    // constants, not the entity's UI/store graph (+ @tanstack) — keeps this
+    // feature store and its spec light at import. See audit D-1.
+} from '$entities/Font/model/const/const';
 import {
-    type ControlDataModel,
-    type ControlModel,
     type PersistentStore,
-    type TypographyControl,
     createPersistentStore,
-    createTypographyControl,
+    createSingleton,
 } from '$shared/lib';
+import type { NumericControl } from '$shared/ui';
 import { SvelteMap } from 'svelte/reactivity';
+import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../../const/const';
+import type {
+    ControlId,
+    ControlModel,
+} from '../../types/typography';
+import { createTypographyControl } from '../../typographyControl/createTypographyControl.svelte';
 
 /**
  * Epsilon for detecting "significant" base-size changes when reconciling
@@ -36,7 +41,7 @@ import { SvelteMap } from 'svelte/reactivity';
  */
 const BASE_SIZE_EPSILON = 0.01;
 
-type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, keyof ControlDataModel>;
+type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, 'value' | 'min' | 'max' | 'step'>;
 
 /**
  * A control with its associated instance
@@ -45,7 +50,7 @@ export interface Control extends ControlOnlyFields<ControlId> {
     /**
      * The reactive typography control instance
      */
-    instance: TypographyControl;
+    instance: NumericControl;
 }
 
 /**
@@ -93,6 +98,12 @@ export class TypographySettingsStore {
      * The underlying font size before responsive scaling is applied
      */
     #baseSize = $state(DEFAULT_FONT_SIZE);
+    /**
+     * Disposes the $effect.root that backs the storage-sync effects.
+     * $effect.root lives outside component lifecycle, so callers must invoke
+     * destroy() to avoid leaking the subscriptions.
+     */
+    #disposeEffects: () => void;
 
     constructor(configs: ControlModel<ControlId>[], storage: PersistentStore<TypographySettings>) {
         this.#storage = storage;
@@ -116,7 +127,7 @@ export class TypographySettingsStore {
 
         // The Sync Effect (UI -> Storage)
         // We access .value explicitly to ensure Svelte 5 tracks the dependency
-        $effect.root(() => {
+        this.#disposeEffects = $effect.root(() => {
             $effect(() => {
                 // EXPLICIT DEPENDENCIES: Accessing these triggers the effect
                 const fontSize = this.#baseSize;
@@ -154,6 +165,14 @@ export class TypographySettingsStore {
         });
     }
 
+    /**
+     * Tears down the storage-sync effects. Call on unmount / store disposal.
+     */
+    destroy(): void {
+        this.#disposeEffects();
+        this.#storage.destroy();
+    }
+
     /**
      * Gets initial value for a control from storage or defaults
      */
@@ -288,9 +307,6 @@ export class TypographySettingsStore {
             if (c.id === 'font_size') {
                 c.instance.value = defaults.fontSize * this.#multiplier;
             } else {
-                // Map storage key to control id
-                const key = c.id.replace('_', '') as keyof TypographySettings;
-                // Simplified for brevity, you'd map these properly:
                 if (c.id === 'font_weight') {
                     c.instance.value = defaults.fontWeight;
                 }
@@ -335,10 +351,19 @@ export function createTypographySettingsStore(
     return new TypographySettingsStore(configs, storage);
 }
 
+export type TypographySettingsStoreInstance = ReturnType<typeof createTypographySettingsStore>;
+
 /**
- * App-wide typography settings singleton, keyed for the comparison view.
+ * App-wide typography settings store, keyed for the comparison view.
+ * Created on first access so its persistent-store sync effects aren't set up
+ * at module load.
  */
-export const typographySettingsStore = createTypographySettingsStore(
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    COMPARISON_STORAGE_KEY,
+const typographySettingsStore = createSingleton(
+    () => createTypographySettingsStore(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, COMPARISON_STORAGE_KEY),
+    instance => instance.destroy(),
 );
+
+export const getTypographySettingsStore = typographySettingsStore.get;
+
+// test-only reset, so specs don't share persisted typography state or leak effects
+export const __resetTypographySettingsStore = typographySettingsStore.reset;
diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
index 094bf75..cbb0390 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
@@ -6,8 +6,7 @@ import {
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-} from '$entities/Font';
+} from '$entities/Font/model/const/const';
 import {
     beforeEach,
     describe,
@@ -15,6 +14,7 @@ import {
     it,
     vi,
 } from 'vitest';
+import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../../const/const';
 import {
     type TypographySettings,
     TypographySettingsStore,
@@ -51,6 +51,7 @@ describe('TypographySettingsStore - Unit Tests', () => {
     let mockPersistentStore: {
         value: TypographySettings;
         clear: () => void;
+        destroy: () => void;
     };
 
     const createMockPersistentStore = (initialValue: TypographySettings) => {
@@ -70,6 +71,7 @@ describe('TypographySettingsStore - Unit Tests', () => {
                     letterSpacing: DEFAULT_LETTER_SPACING,
                 };
             },
+            destroy() {},
         };
     };
 
@@ -535,6 +537,7 @@ describe('TypographySettingsStore - Unit Tests', () => {
                     mockStorage = v;
                 },
                 clear: clearSpy,
+                destroy() {},
             };
 
             const manager = new TypographySettingsStore(
diff --git a/src/features/AdjustTypography/model/types/typography.ts b/src/features/AdjustTypography/model/types/typography.ts
new file mode 100644
index 0000000..4b89019
--- /dev/null
+++ b/src/features/AdjustTypography/model/types/typography.ts
@@ -0,0 +1,27 @@
+import type {
+    ControlLabels,
+    NumericControl,
+} from '$shared/ui';
+
+/**
+ * Identifiers for the adjustable typography axes
+ */
+export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
+
+/**
+ * Static configuration for one typography control.
+ *
+ * Derived from the SSOT contract types — declares no fields of its own beyond
+ * the domain `id`. Bounds come from NumericControl, labels from ControlLabels.
+ *
+ * @template T - Control identifier type
+ */
+export type ControlModel<T extends string = string> =
+    & Pick<NumericControl, 'value' | 'min' | 'max' | 'step'>
+    & ControlLabels
+    & {
+        /**
+         * Unique identifier for the control
+         */
+        id: T;
+    };
diff --git a/src/features/AdjustTypography/model/typographyControl/createTypographyControl.svelte.ts b/src/features/AdjustTypography/model/typographyControl/createTypographyControl.svelte.ts
new file mode 100644
index 0000000..452ea33
--- /dev/null
+++ b/src/features/AdjustTypography/model/typographyControl/createTypographyControl.svelte.ts
@@ -0,0 +1,67 @@
+/**
+ * Bounded numeric control for typography settings.
+ *
+ * Produces a reactive control that clamps to [min, max] and rounds to step.
+ * Implements the NumericControl contract that ComboControl renders.
+ */
+import {
+    clampNumber,
+    roundToStepPrecision,
+} from '$shared/lib/utils';
+import type { NumericControl } from '$shared/ui';
+
+/**
+ * Bounds + initial value seed for a control
+ */
+type ControlSeed = Pick<NumericControl, 'value' | 'min' | 'max' | 'step'>;
+
+/**
+ * Create a reactive bounded numeric control.
+ *
+ * @param initialState - Initial value and bounds
+ * @returns A NumericControl whose value is always clamped and step-rounded
+ */
+export function createTypographyControl(initialState: ControlSeed): NumericControl {
+    let value = $state(initialState.value);
+    let max = $state(initialState.max);
+    let min = $state(initialState.min);
+    let step = $state(initialState.step);
+
+    const { isAtMax, isAtMin } = $derived({
+        isAtMax: value >= max,
+        isAtMin: value <= min,
+    });
+
+    return {
+        get value() {
+            return value;
+        },
+        set value(newValue) {
+            const rounded = roundToStepPrecision(clampNumber(newValue, min, max), step);
+            if (value !== rounded) {
+                value = rounded;
+            }
+        },
+        get max() {
+            return max;
+        },
+        get min() {
+            return min;
+        },
+        get step() {
+            return step;
+        },
+        get isAtMax() {
+            return isAtMax;
+        },
+        get isAtMin() {
+            return isAtMin;
+        },
+        increase() {
+            value = roundToStepPrecision(clampNumber(value + step, min, max), step);
+        },
+        decrease() {
+            value = roundToStepPrecision(clampNumber(value - step, min, max), step);
+        },
+    };
+}
diff --git a/src/shared/lib/helpers/createTypographyControl/createTypographyControl.test.ts b/src/features/AdjustTypography/model/typographyControl/createTypographyControl.test.ts
similarity index 98%
rename from src/shared/lib/helpers/createTypographyControl/createTypographyControl.test.ts
rename to src/features/AdjustTypography/model/typographyControl/createTypographyControl.test.ts
index 31ca633..85d683a 100644
--- a/src/shared/lib/helpers/createTypographyControl/createTypographyControl.test.ts
+++ b/src/features/AdjustTypography/model/typographyControl/createTypographyControl.test.ts
@@ -1,12 +1,10 @@
-import {
-    type TypographyControl,
-    createTypographyControl,
-} from '$shared/lib';
+import type { NumericControl } from '$shared/ui';
 import {
     describe,
     expect,
     it,
 } from 'vitest';
+import { createTypographyControl } from './createTypographyControl.svelte';
 
 /**
  * Test Strategy for createTypographyControl Helper
@@ -34,7 +32,7 @@ describe('createTypographyControl - Unit Tests', () => {
         min?: number;
         max?: number;
         step?: number;
-    }): TypographyControl {
+    }): NumericControl {
         return createTypographyControl({
             value: initialValue,
             min: options?.min ?? 0,
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index e52b422..d628a42 100644
--- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
@@ -5,11 +5,6 @@
     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/lib';
 import {
@@ -24,7 +19,12 @@ import XIcon from '@lucide/svelte/icons/x';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import { fly } from 'svelte/transition';
-import { typographySettingsStore } from '../../model';
+import {
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
+    getTypographySettingsStore,
+} from '../../model';
 
 interface Props {
     /**
@@ -46,6 +46,7 @@ interface Props {
 let { class: className, hidden = false, open = $bindable(false) }: Props = $props();
 
 const responsive = getContext<ResponsiveManager>('responsive');
+const typographySettingsStore = getTypographySettingsStore();
 
 /**
  * Sets the common font size multiplier based on the current responsive state.
diff --git a/src/entities/Breadcrumb/index.ts b/src/features/Breadcrumb/index.ts
similarity index 88%
rename from src/entities/Breadcrumb/index.ts
rename to src/features/Breadcrumb/index.ts
index 4faa8d4..b148cc3 100644
--- a/src/entities/Breadcrumb/index.ts
+++ b/src/features/Breadcrumb/index.ts
@@ -8,7 +8,7 @@
  * @example
  * ```svelte
  * <script lang="ts">
- *   import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+ *   import { scrollBreadcrumbsStore } from '$features/Breadcrumb';
  *   import { onMount } from 'svelte';
  *
  *   onMount(() => {
@@ -26,8 +26,8 @@
  */
 
 export {
+    getScrollBreadcrumbsStore,
     type NavigationAction,
-    scrollBreadcrumbsStore,
 } from './model';
 export {
     BreadcrumbHeader,
diff --git a/src/features/Breadcrumb/model/index.ts b/src/features/Breadcrumb/model/index.ts
new file mode 100644
index 0000000..d5aee2c
--- /dev/null
+++ b/src/features/Breadcrumb/model/index.ts
@@ -0,0 +1,7 @@
+export {
+    __resetScrollBreadcrumbsStore,
+    createScrollBreadcrumbsStore,
+    getScrollBreadcrumbsStore,
+} from './store/scrollBreadcrumbsStore.svelte';
+export type { BreadcrumbItem } from './store/scrollBreadcrumbsStore.svelte';
+export type { NavigationAction } from './types/types.ts';
diff --git a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
similarity index 91%
rename from src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
rename to src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
index b72e3bd..a44906e 100644
--- a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
+++ b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
@@ -1,3 +1,5 @@
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
+
 /**
  * Scroll-based breadcrumb tracking store
  *
@@ -15,7 +17,7 @@
  * @example
  * ```svelte
  * <script lang="ts">
- *   import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+ *   import { scrollBreadcrumbsStore } from '$features/Breadcrumb';
  *
  *   onMount(() => {
  *     scrollBreadcrumbsStore.add({
@@ -167,6 +169,13 @@ class ScrollBreadcrumbsStore {
         this.#detachScrollListener();
     }
 
+    /**
+     * Tears down the observer and scroll listener. Call on store disposal.
+     */
+    destroy(): void {
+        this.#disconnect();
+    }
+
     /**
      * All tracked items sorted by index
      */
@@ -273,6 +282,14 @@ export function createScrollBreadcrumbsStore(): ScrollBreadcrumbsStore {
 }
 
 /**
- * Singleton scroll breadcrumbs store instance
+ * App-wide scroll breadcrumbs store, created on first access.
  */
-export const scrollBreadcrumbsStore = createScrollBreadcrumbsStore();
+const scrollBreadcrumbsStore = createSingleton(
+    () => createScrollBreadcrumbsStore(),
+    instance => instance.destroy(),
+);
+
+export const getScrollBreadcrumbsStore = scrollBreadcrumbsStore.get;
+
+// test-only reset, so specs don't share observer/scroll state
+export const __resetScrollBreadcrumbsStore = scrollBreadcrumbsStore.reset;
diff --git a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
similarity index 99%
rename from src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
rename to src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
index dd3929b..8ab9d0c 100644
--- a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
+++ b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
@@ -70,7 +70,6 @@ class MockIntersectionObserver implements IntersectionObserver {
 describe('ScrollBreadcrumbsStore', () => {
     let scrollListeners: Array<() => void> = [];
     let addEventListenerSpy: ReturnType<typeof vi.spyOn>;
-    let removeEventListenerSpy: ReturnType<typeof vi.spyOn>;
     let scrollToSpy: ReturnType<typeof vi.spyOn>;
 
     // Helper to create mock elements
@@ -111,7 +110,7 @@ describe('ScrollBreadcrumbsStore', () => {
 
         // Track scroll event listeners
         addEventListenerSpy = vi.spyOn(window, 'addEventListener').mockImplementation(
-            (event: string, listener: EventListenerOrEventListenerObject, options?: any) => {
+            (event: string, listener: EventListenerOrEventListenerObject, _options?: any) => {
                 if (event === 'scroll') {
                     scrollListeners.push(listener as () => void);
                 }
@@ -119,7 +118,7 @@ describe('ScrollBreadcrumbsStore', () => {
             },
         );
 
-        removeEventListenerSpy = vi.spyOn(window, 'removeEventListener').mockImplementation(
+        vi.spyOn(window, 'removeEventListener').mockImplementation(
             (event: string, listener: EventListenerOrEventListenerObject) => {
                 if (event === 'scroll') {
                     const index = scrollListeners.indexOf(listener as () => void);
diff --git a/src/entities/Breadcrumb/model/types/types.ts b/src/features/Breadcrumb/model/types/types.ts
similarity index 100%
rename from src/entities/Breadcrumb/model/types/types.ts
rename to src/features/Breadcrumb/model/types/types.ts
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte
similarity index 100%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
similarity index 96%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index e48dcf9..73b7aee 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
+++ b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
@@ -14,9 +14,10 @@ import { cubicOut } from 'svelte/easing';
 import { slide } from 'svelte/transition';
 import {
     type BreadcrumbItem,
-    scrollBreadcrumbsStore,
+    getScrollBreadcrumbsStore,
 } from '../../model';
 
+const scrollBreadcrumbsStore = getScrollBreadcrumbsStore();
 const breadcrumbs = $derived(scrollBreadcrumbsStore.scrolledPastItems);
 const responsive = getContext<ResponsiveManager>('responsive');
 
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts
similarity index 100%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
similarity index 85%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
index 792d86c..0052c57 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
+++ b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
@@ -1,18 +1,24 @@
 <script>
 import { onMount } from 'svelte';
-import { scrollBreadcrumbsStore } from '../../model';
+import { getScrollBreadcrumbsStore } from '../../model';
 import BreadcrumbHeader from './BreadcrumbHeader.svelte';
 
+const scrollBreadcrumbsStore = getScrollBreadcrumbsStore();
+
 const sections = [
     { index: 100, title: 'Introduction' },
     { index: 101, title: 'Typography' },
     { index: 102, title: 'Spacing' },
 ];
 
-/** @type {HTMLDivElement} */
-let container;
+/** @type {HTMLDivElement | undefined} */
+let container = $state();
 
 onMount(() => {
+    if (!container) {
+        return;
+    }
+
     for (const section of sections) {
         const el = /** @type {HTMLElement} */ (container.querySelector(`[data-story-index="${section.index}"]`));
         scrollBreadcrumbsStore.add({ index: section.index, title: section.title, element: el }, 96);
diff --git a/src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte b/src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte
similarity index 100%
rename from src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte
rename to src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte
diff --git a/src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte b/src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
similarity index 90%
rename from src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
rename to src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
index 3c8d602..d8796b6 100644
--- a/src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
+++ b/src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
@@ -6,9 +6,11 @@
 import { type Snippet } from 'svelte';
 import {
     type NavigationAction,
-    scrollBreadcrumbsStore,
+    getScrollBreadcrumbsStore,
 } from '../../model';
 
+const scrollBreadcrumbsStore = getScrollBreadcrumbsStore();
+
 interface Props {
     /**
      * Navigation index
diff --git a/src/entities/Breadcrumb/ui/index.ts b/src/features/Breadcrumb/ui/index.ts
similarity index 100%
rename from src/entities/Breadcrumb/ui/index.ts
rename to src/features/Breadcrumb/ui/index.ts
diff --git a/src/features/ChangeAppTheme/index.ts b/src/features/ChangeAppTheme/index.ts
index 80b33de..b08c329 100644
--- a/src/features/ChangeAppTheme/index.ts
+++ b/src/features/ChangeAppTheme/index.ts
@@ -1,2 +1,2 @@
-export * from './model';
-export * from './ui';
+export { getThemeManager } from './model';
+export { ThemeSwitch } from './ui';
diff --git a/src/features/ChangeAppTheme/model/index.ts b/src/features/ChangeAppTheme/model/index.ts
index cbc18dd..093c717 100644
--- a/src/features/ChangeAppTheme/model/index.ts
+++ b/src/features/ChangeAppTheme/model/index.ts
@@ -1 +1 @@
-export { themeManager } from './store/ThemeManager/ThemeManager.svelte';
+export { getThemeManager } from './store/ThemeManager/ThemeManager.svelte';
diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
index b7523c2..d3f6584 100644
--- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
+++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
@@ -28,7 +28,10 @@
  * ```
  */
 
-import { createPersistentStore } from '$shared/lib';
+import {
+    createPersistentStore,
+    createSingleton,
+} from '$shared/lib';
 
 export const STORAGE_KEY = 'glyphdiff:theme';
 
@@ -125,6 +128,7 @@ class ThemeManager {
     destroy(): void {
         this.#mediaQuery?.removeEventListener('change', this.#systemChangeHandler);
         this.#mediaQuery = null;
+        this.#store.destroy();
     }
 
     /**
@@ -195,14 +199,20 @@ class ThemeManager {
 }
 
 /**
- * Singleton theme manager instance
+ * App-wide theme manager, created on first access.
  *
- * Use throughout the app for consistent theme state.
+ * Lazy so its persistent-store subscription isn't set up at module load.
+ * Call init() on mount and destroy() on unmount (see Layout).
  */
-export const themeManager = new ThemeManager();
+const themeManager = createSingleton(() => new ThemeManager(), instance => instance.destroy());
+
+export const getThemeManager = themeManager.get;
+
+// test-only reset, so specs don't share persisted theme state
+export const __resetThemeManager = themeManager.reset;
 
 /**
  * ThemeManager class exported for testing purposes
- * Use the singleton `themeManager` in application code.
+ * Use the `getThemeManager()` accessor in application code.
  */
 export { ThemeManager };
diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
index 007a0fd..8ccb4ce 100644
--- a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
+++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.stories.svelte
@@ -22,8 +22,9 @@ const { Story } = defineMeta({
 </script>
 
 <script lang="ts">
-import { themeManager } from '$features/ChangeAppTheme';
+import { getThemeManager } from '$features/ChangeAppTheme';
 
+const themeManager = getThemeManager();
 // Current theme state for display
 const currentTheme = $derived(themeManager.value);
 const themeSource = $derived(themeManager.source);
diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
index 4276ff7..b63c1db 100644
--- a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
+++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte
@@ -8,10 +8,11 @@ import { IconButton } from '$shared/ui';
 import MoonIcon from '@lucide/svelte/icons/moon';
 import SunIcon from '@lucide/svelte/icons/sun';
 import { getContext } from 'svelte';
-import { themeManager } from '../../model';
+import { getThemeManager } from '../../model';
 
 const responsive = getContext<ResponsiveManager>('responsive');
 
+const themeManager = getThemeManager();
 const theme = $derived(themeManager.value);
 </script>
 
diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts
index 393bf55..08d8859 100644
--- a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts
+++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts
@@ -3,16 +3,25 @@ import {
     render,
     screen,
 } from '@testing-library/svelte';
-import { themeManager } from '../../model';
+import { afterEach } from 'vitest';
+import { getThemeManager } from '../../model';
+import { __resetThemeManager } from '../../model/store/ThemeManager/ThemeManager.svelte';
 import ThemeSwitch from './ThemeSwitch.svelte';
 
 const context = new Map([['responsive', { isMobile: false }]]);
 
 describe('ThemeSwitch', () => {
+    let themeManager: ReturnType<typeof getThemeManager>;
+
     beforeEach(() => {
+        themeManager = getThemeManager();
         themeManager.setTheme('light');
     });
 
+    afterEach(() => {
+        __resetThemeManager();
+    });
+
     describe('Rendering', () => {
         it('renders an icon button', () => {
             render(ThemeSwitch, { context });
diff --git a/src/features/DisplayFont/index.ts b/src/features/DisplayFont/index.ts
deleted file mode 100644
index a15fd38..0000000
--- a/src/features/DisplayFont/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FontSampler } from './ui';
diff --git a/src/features/DisplayFont/ui/index.ts b/src/features/DisplayFont/ui/index.ts
deleted file mode 100644
index b055bdf..0000000
--- a/src/features/DisplayFont/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FontSampler from './FontSampler/FontSampler.svelte';
-
-export { FontSampler };
diff --git a/src/features/FetchFontsByIds/index.ts b/src/features/FetchFontsByIds/index.ts
deleted file mode 100644
index 600c651..0000000
--- a/src/features/FetchFontsByIds/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FontsByIdsStore } from './model';
diff --git a/src/features/FetchFontsByIds/model/index.ts b/src/features/FetchFontsByIds/model/index.ts
deleted file mode 100644
index c449f87..0000000
--- a/src/features/FetchFontsByIds/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { FontsByIdsStore } from './store/fontsByIdsStore/fontsByIdsStore.svelte';
diff --git a/src/features/FilterAndSortFonts/api/filters/filters.ts b/src/features/FilterAndSortFonts/api/filters/filters.ts
index ef38be4..8e0e51e 100644
--- a/src/features/FilterAndSortFonts/api/filters/filters.ts
+++ b/src/features/FilterAndSortFonts/api/filters/filters.ts
@@ -9,7 +9,7 @@
 
 import { api } from '$shared/api/api';
 import { API_ENDPOINTS } from '$shared/api/endpoints';
-import { NonRetryableError } from '$shared/api/queryClient';
+import { NonRetryableError } from '$shared/api/nonRetryableError';
 
 const PROXY_API_URL = API_ENDPOINTS.filters;
 
diff --git a/src/features/FilterAndSortFonts/api/index.ts b/src/features/FilterAndSortFonts/api/index.ts
index 56cc8f4..2e8de2a 100644
--- a/src/features/FilterAndSortFonts/api/index.ts
+++ b/src/features/FilterAndSortFonts/api/index.ts
@@ -1 +1,6 @@
-export * from './filters/filters';
+export { fetchProxyFilters } from './filters/filters';
+export type {
+    FilterMetadata,
+    FilterOption,
+    ProxyFiltersResponse,
+} from './filters/filters';
diff --git a/src/features/FilterAndSortFonts/index.ts b/src/features/FilterAndSortFonts/index.ts
index bd666a3..d0535aa 100644
--- a/src/features/FilterAndSortFonts/index.ts
+++ b/src/features/FilterAndSortFonts/index.ts
@@ -1,24 +1,28 @@
 export { mapAppliedFiltersToParams } from './lib';
 
 export {
-    type AppliedFilterStore,
-    appliedFilterStore,
-    /**
-     * Filter Store
-     */
-    availableFilterStore,
     /**
      * Filter Manager
      */
     createAppliedFilterStore,
+    /**
+     * Lazy store accessors
+     */
+    getAppliedFilterStore,
+    getAvailableFilterStore,
+    getSortStore,
     /**
      * Sort Store
      */
     SORT_MAP,
     SORT_OPTIONS,
-    type SortApiValue,
-    type SortOption,
-    sortStore,
+    startFilterBindings,
+} from './model';
+
+export type {
+    AppliedFilterStore,
+    SortApiValue,
+    SortOption,
 } from './model';
 
 export {
diff --git a/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.test.ts b/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.test.ts
new file mode 100644
index 0000000..7c42e82
--- /dev/null
+++ b/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.test.ts
@@ -0,0 +1,83 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import type {
+    FilterMetadata,
+    FilterOption,
+} from '../../api/filters/filters';
+import { mapFilterMetadataToGroups } from './mapFilterMetadataToGroups';
+
+/**
+ * Build a FilterOption with a known value and count.
+ */
+function option(value: string, count: number): FilterOption {
+    return { id: value, name: value, value, count };
+}
+
+/**
+ * Build filter metadata for one group from (value, count) entries.
+ */
+function metadata(id: string, options: Array<[string, number]>): FilterMetadata {
+    return {
+        id,
+        name: id,
+        description: '',
+        type: 'array',
+        options: options.map(([value, count]) => option(value, count)),
+    };
+}
+
+describe('mapFilterMetadataToGroups', () => {
+    it('maps id and name onto group id and label', () => {
+        const [group] = mapFilterMetadataToGroups([metadata('categories', [['serif', 1]])]);
+
+        expect(group.id).toBe('categories');
+        expect(group.label).toBe('categories');
+    });
+
+    it('projects each option to a property with selected: false', () => {
+        const [group] = mapFilterMetadataToGroups([metadata('providers', [['google', 5]])]);
+
+        expect(group.properties).toEqual([
+            { id: 'google', name: 'google', value: 'google', selected: false },
+        ]);
+    });
+
+    it('orders properties by descending count', () => {
+        const [group] = mapFilterMetadataToGroups([
+            metadata('subsets', [['latin', 2], ['cyrillic', 9], ['greek', 5]]),
+        ]);
+
+        expect(group.properties.map(p => p.value)).toEqual(['cyrillic', 'greek', 'latin']);
+    });
+
+    it('does not mutate the source options array (TanStack cache safety)', () => {
+        const source = metadata('subsets', [['latin', 2], ['cyrillic', 9]]);
+        const originalOrder = source.options.map(o => o.value);
+
+        mapFilterMetadataToGroups([source]);
+
+        expect(source.options.map(o => o.value)).toEqual(originalOrder);
+    });
+
+    it('maps every group, preserving group order', () => {
+        const groups = mapFilterMetadataToGroups([
+            metadata('providers', [['google', 1]]),
+            metadata('categories', [['serif', 1]]),
+        ]);
+
+        expect(groups.map(g => g.id)).toEqual(['providers', 'categories']);
+    });
+
+    it('returns an empty group list for empty metadata', () => {
+        expect(mapFilterMetadataToGroups([])).toEqual([]);
+    });
+
+    it('yields an empty properties list when a group has no options', () => {
+        const [group] = mapFilterMetadataToGroups([metadata('providers', [])]);
+
+        expect(group.properties).toEqual([]);
+    });
+});
diff --git a/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.ts b/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.ts
new file mode 100644
index 0000000..f17244e
--- /dev/null
+++ b/src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.ts
@@ -0,0 +1,36 @@
+import type { FilterMetadata } from '../../api/filters/filters';
+import type { FilterGroupConfig } from '../../model';
+
+/**
+ * Map backend filter metadata into the group configs `appliedFilterStore.setGroups`
+ * consumes.
+ *
+ * Inverse direction of `mapAppliedFiltersToParams`: that maps applied selections out
+ * to API params; this maps the API's available-filter catalog in to the UI model.
+ *
+ * Options are ordered by descending font count so the most populated values surface
+ * first. The source array is copied before sorting — `metadata` is TanStack-cached
+ * query data, and `.sort()` mutates in place; sorting the live cache both corrupts it
+ * and, when called from a reactive effect, writes into that effect's own read
+ * dependency (triggering an update loop).
+ *
+ * Every property starts unselected; selection state is owned by the store, not the
+ * backend catalog.
+ *
+ * @param metadata - Available-filter catalog from the filters endpoint
+ * @returns Group configs ready for `setGroups`
+ */
+export function mapFilterMetadataToGroups(metadata: FilterMetadata[]): FilterGroupConfig<string>[] {
+    return metadata.map(filter => ({
+        id: filter.id,
+        label: filter.name,
+        properties: [...filter.options]
+            .sort((a, b) => b.count - a.count)
+            .map(opt => ({
+                id: opt.id,
+                name: opt.name,
+                value: opt.value,
+                selected: false,
+            })),
+    }));
+}
diff --git a/src/features/FilterAndSortFonts/model/index.ts b/src/features/FilterAndSortFonts/model/index.ts
index 755643a..6dcafff 100644
--- a/src/features/FilterAndSortFonts/model/index.ts
+++ b/src/features/FilterAndSortFonts/model/index.ts
@@ -14,9 +14,9 @@ export type {
  */
 export {
     /**
-     * Low-level property selection store
+     * Lazy accessor for the app-wide filter-metadata store
      */
-    availableFilterStore,
+    getAvailableFilterStore,
 } from './store/availableFilterStore/availableFilterStore.svelte';
 
 /**
@@ -27,26 +27,30 @@ export {
      * Reactive interface returned by `createAppliedFilterStore`
      */
     type AppliedFilterStore,
-    /**
-     * High-level manager for syncing search and filters
-     */
-    appliedFilterStore,
     /**
      * Factory for constructing a filter manager instance
      */
     createAppliedFilterStore,
+    /**
+     * Lazy accessor for the app-wide filter manager
+     */
+    getAppliedFilterStore,
 } from './store/appliedFilterStore/appliedFilterStore.svelte';
 
 /**
  * Side-effect import: installs the global appliedFilterStore+sortStore → fontCatalogStore
  * bridge on first import of this feature barrel. No exports.
  */
-import './store/bindings.svelte';
+export { startFilterBindings } from './store/bindings.svelte';
 
 /**
  * Sorting logic
  */
 export {
+    /**
+     * Lazy accessor for the app-wide sort store
+     */
+    getSortStore,
     /**
      * Map of human-readable labels to API sort keys
      */
@@ -63,8 +67,4 @@ export {
      * UI model for a single sort option
      */
     type SortOption,
-    /**
-     * Reactive store for the current sort selection
-     */
-    sortStore,
 } from './store/sortStore/sortStore.svelte';
diff --git a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
index f2e8258..c0bee23 100644
--- a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
@@ -23,7 +23,10 @@
  * ```
  */
 
-import { createFilter } from '$shared/lib';
+import {
+    createFilter,
+    createSingleton,
+} from '$shared/lib';
 import { createDebouncedState } from '$shared/lib/helpers';
 import type {
     FilterConfig,
@@ -42,8 +45,13 @@ import type {
 export function createAppliedFilterStore<TValue extends string>(config: FilterConfig<TValue>) {
     const search = createDebouncedState(config.queryValue ?? '');
 
-    // Create filter instances upfront
-    const groups = $state(
+    // Create filter instances upfront.
+    // `let` (not `const`) so setGroups can REASSIGN the whole array. In-place
+    // `groups.length = 0; groups.push(...)` is forbidden here: push reads the
+    // array's length signal, so a $effect that calls setGroups would both read
+    // and write `groups.length` in one run and re-trigger itself forever
+    // (effect_update_depth_exceeded).
+    let groups = $state(
         config.groups.map(config => ({
             id: config.id,
             label: config.label,
@@ -62,14 +70,11 @@ export function createAppliedFilterStore<TValue extends string>(config: FilterCo
          * Used when dynamic filter data loads from backend
          */
         setGroups(newGroups: FilterGroupConfig<TValue>[]) {
-            groups.length = 0;
-            groups.push(
-                ...newGroups.map(g => ({
-                    id: g.id,
-                    label: g.label,
-                    instance: createFilter({ properties: g.properties }),
-                })),
-            );
+            groups = newGroups.map(g => ({
+                id: g.id,
+                label: g.label,
+                instance: createFilter({ properties: g.properties }),
+            }));
         },
         /**
          * Current search query value (immediate, for UI binding)
@@ -128,13 +133,20 @@ export function createAppliedFilterStore<TValue extends string>(config: FilterCo
 export type AppliedFilterStore = ReturnType<typeof createAppliedFilterStore>;
 
 /**
- * App-wide filter manager singleton.
+ * App-wide filter manager, created on first access.
  *
  * Constructed with empty groups; the availableFilterStore → appliedFilterStore wiring
  * lives in `./bindings.svelte` and populates groups once backend filter
  * metadata arrives.
  */
-export const appliedFilterStore = createAppliedFilterStore({
-    queryValue: '',
-    groups: [],
-});
+const appliedFilterStore = createSingleton(() =>
+    createAppliedFilterStore<string>({
+        queryValue: '',
+        groups: [],
+    })
+);
+
+export const getAppliedFilterStore = appliedFilterStore.get;
+
+// test-only reset, so specs don't share filter/selection state
+export const __resetAppliedFilterStore = appliedFilterStore.reset;
diff --git a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
index c546ac1..02c2333 100644
--- a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
+++ b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
@@ -29,12 +29,6 @@ import { createAppliedFilterStore } from './appliedFilterStore.svelte';
  * testing Svelte 5 reactive code in Node.js.
  */
 
-// Helper to flush Svelte effects (they run in microtasks)
-async function flushEffects() {
-    await Promise.resolve();
-    await Promise.resolve();
-}
-
 // Helper to create test properties
 function createTestProperties(count: number, selectedIndices: number[] = []): Property<string>[] {
     return Array.from({ length: count }, (_, i) => ({
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 7eff164..f11b276 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -20,8 +20,9 @@ import type { FilterMetadata } from '$features/FilterAndSortFonts/api/filters/fi
 import {
     DEFAULT_QUERY_GC_TIME_MS,
     DEFAULT_QUERY_STALE_TIME_MS,
-    queryClient,
+    getQueryClient,
 } from '$shared/api/queryClient';
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
 import {
     type QueryKey,
     QueryObserver,
@@ -49,7 +50,7 @@ export class AvailableFilterStore {
     /**
      * Shared query client
      */
-    protected qc = queryClient;
+    protected qc = getQueryClient();
 
     /**
      * Creates a new filters store
@@ -127,6 +128,15 @@ export class AvailableFilterStore {
 }
 
 /**
- * Singleton instance
+ * App-wide filter-metadata store, created on first access. Lazy so the
+ * QueryObserver isn't constructed at module load.
  */
-export const availableFilterStore = new AvailableFilterStore();
+const availableFilterStore = createSingleton(
+    () => new AvailableFilterStore(),
+    instance => instance.destroy(),
+);
+
+export const getAvailableFilterStore = availableFilterStore.get;
+
+// test-only reset, so specs don't share a live observer
+export const __resetAvailableFilterStore = availableFilterStore.reset;
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts
index 8f489d4..e36fe76 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts
@@ -1,4 +1,6 @@
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import {
     afterEach,
     beforeEach,
diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index 417fc3e..ddb0c6c 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -9,52 +9,34 @@
  * observer, so it lives at module scope, not in any individual widget.
  */
 
-import { fontCatalogStore } from '$entities/Font';
+import { getFontCatalog } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
-import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
-import { availableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
-import { sortStore } from './sortStore/sortStore.svelte';
+import { mapFilterMetadataToGroups } from '../../lib/mapper/mapFilterMetadataToGroups';
+import { getAppliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
+import { getAvailableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
+import { getSortStore } from './sortStore/sortStore.svelte';
 
-$effect.root(() => {
-    /**
-     * Populate appliedFilterStore groups when backend filter metadata resolves.
-     * availableFilterStore is async; until it loads, appliedFilterStore has empty groups
-     * and the UI renders nothing for them.
-     */
-    $effect(() => {
-        const dynamicFilters = availableFilterStore.filters;
+export function startFilterBindings(): () => void {
+    const appliedFilterStore = getAppliedFilterStore();
+    const availableFilterStore = getAvailableFilterStore();
+    const sortStore = getSortStore();
 
-        if (dynamicFilters.length > 0) {
-            appliedFilterStore.setGroups(
-                dynamicFilters.map(filter => ({
-                    id: filter.id,
-                    label: filter.name,
-                    properties: filter.options.sort((a, b) => b.count - a.count).map(opt => ({
-                        id: opt.id,
-                        name: opt.name,
-                        value: opt.value,
-                        selected: false,
-                    })),
-                })),
-            );
-        }
+    const stop = $effect.root(() => {
+        $effect(() => {
+            const dynamicFilters = availableFilterStore.filters;
+            if (dynamicFilters.length > 0) {
+                appliedFilterStore.setGroups(mapFilterMetadataToGroups(dynamicFilters));
+            }
+        });
+
+        $effect(() => {
+            const params = mapAppliedFiltersToParams(appliedFilterStore);
+            const sort = sortStore.apiValue;
+            const catalog = getFontCatalog();
+            untrack(() => catalog.setParams({ ...params, sort }));
+        });
     });
 
-    /**
-     * Mirror filter selections + debounced search query + sort into fontCatalogStore params.
-     *
-     * Filters and sort are merged into one setParams call to avoid a startup race:
-     * two separate effects each issued setOptions with a different queryKey on the
-     * first flush, producing an orphaned `?limit=50&offset=0` fetch immediately
-     * followed by the real `?limit=50&sort=popularity&offset=0` fetch.
-     *
-     * untrack the write so fontCatalogStore's internal $state reads don't feed back
-     * into this effect's dependency graph.
-     */
-    $effect(() => {
-        const params = mapAppliedFiltersToParams(appliedFilterStore);
-        const sort = sortStore.apiValue;
-        untrack(() => fontCatalogStore.setParams({ ...params, sort }));
-    });
-});
+    return stop; // hand the caller the cleanup
+}
diff --git a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
index 3a8908f..b748471 100644
--- a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
@@ -1,3 +1,5 @@
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
+
 /**
  * Sort store — manages the current sort option for font listings.
  *
@@ -44,4 +46,14 @@ export function createSortStore(initial: SortOption = 'Popularity') {
     };
 }
 
-export const sortStore = createSortStore();
+export type SortStore = ReturnType<typeof createSortStore>;
+
+/**
+ * App-wide sort store, created on first access.
+ */
+const sortStore = createSingleton(() => createSortStore());
+
+export const getSortStore = sortStore.get;
+
+// test-only reset, so specs don't share selection state
+export const __resetSortStore = sortStore.reset;
diff --git a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts
index fcdc41b..b78cbc8 100644
--- a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts
+++ b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts
@@ -1,4 +1,5 @@
 import {
+    afterEach,
     describe,
     expect,
     it,
@@ -7,8 +8,9 @@ import {
     SORT_MAP,
     SORT_OPTIONS,
     type SortOption,
+    __resetSortStore,
     createSortStore,
-    sortStore,
+    getSortStore,
 } from './sortStore.svelte';
 
 describe('createSortStore', () => {
@@ -51,14 +53,24 @@ describe('createSortStore', () => {
     });
 });
 
-describe('sortStore singleton', () => {
+describe('getSortStore singleton', () => {
+    afterEach(() => {
+        __resetSortStore();
+    });
+
+    it('returns the same instance across calls', () => {
+        expect(getSortStore()).toBe(getSortStore());
+    });
+
     it('exposes the same shape as a factory instance', () => {
+        const sortStore = getSortStore();
         expect(typeof sortStore.value).toBe('string');
         expect(typeof sortStore.apiValue).toBe('string');
         expect(typeof sortStore.set).toBe('function');
     });
 
     it('accepts all SORT_OPTIONS as valid set() inputs', () => {
+        const sortStore = getSortStore();
         for (const option of SORT_OPTIONS) {
             sortStore.set(option);
             expect(sortStore.value).toBe(option);
diff --git a/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte
index b993c48..ec993d9 100644
--- a/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte
+++ b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte
@@ -4,10 +4,13 @@
 -->
 <script lang="ts">
 import { FilterGroup } from '$shared/ui';
-import { appliedFilterStore } from '../../model';
+import { getAppliedFilterStore } from '../../model';
+
+const appliedFilterStore = getAppliedFilterStore();
+const groups = $derived(appliedFilterStore.groups);
 </script>
 
-{#each appliedFilterStore.groups as group (group.id)}
+{#each groups as group (group.id)}
     <FilterGroup
         displayedLabel={group.label}
         filter={group.instance}
diff --git a/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
index 0ef079f..096ac64 100644
--- a/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
+++ b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
@@ -1,6 +1,6 @@
 import {
-    appliedFilterStore,
-    availableFilterStore,
+    getAppliedFilterStore,
+    getAvailableFilterStore,
 } from '$features/FilterAndSortFonts';
 import {
     render,
@@ -12,8 +12,8 @@ import Filters from './Filters.svelte';
 describe('Filters', () => {
     beforeEach(() => {
         // Clear groups and mock availableFilterStore to be empty so the auto-sync effect doesn't overwrite us
-        appliedFilterStore.setGroups([]);
-        vi.spyOn(availableFilterStore, 'filters', 'get').mockReturnValue([]);
+        getAppliedFilterStore().setGroups([]);
+        vi.spyOn(getAvailableFilterStore(), 'filters', 'get').mockReturnValue([]);
     });
 
     afterEach(() => {
@@ -28,7 +28,7 @@ describe('Filters', () => {
         });
 
         it('renders a label for each filter group', () => {
-            appliedFilterStore.setGroups([
+            getAppliedFilterStore().setGroups([
                 { id: 'cat', label: 'Categories', properties: [] },
                 { id: 'prov', label: 'Font Providers', properties: [] },
             ]);
@@ -38,7 +38,7 @@ describe('Filters', () => {
         });
 
         it('renders filter properties within groups', () => {
-            appliedFilterStore.setGroups([
+            getAppliedFilterStore().setGroups([
                 {
                     id: 'cat',
                     label: 'Category',
@@ -54,7 +54,7 @@ describe('Filters', () => {
         });
 
         it('renders multiple groups with their properties', () => {
-            appliedFilterStore.setGroups([
+            getAppliedFilterStore().setGroups([
                 {
                     id: 'cat',
                     label: 'Category',
diff --git a/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte b/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte
index f249f99..08c4fc9 100644
--- a/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte
@@ -12,8 +12,8 @@ import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 import { getContext } from 'svelte';
 import {
     SORT_OPTIONS,
-    appliedFilterStore,
-    sortStore,
+    getAppliedFilterStore,
+    getSortStore,
 } from '../../model';
 
 interface Props {
@@ -30,6 +30,10 @@ const {
 const responsive = getContext<ResponsiveManager>('responsive');
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 
+const appliedFilterStore = getAppliedFilterStore();
+const sortStore = getSortStore();
+const sortValue = $derived(sortStore.value);
+
 function handleReset() {
     appliedFilterStore.deselectAllGlobal();
 }
@@ -53,7 +57,7 @@ function handleReset() {
                 <Button
                     variant="ghost"
                     size={isMobileOrTabletPortrait ? 'xs' : 'sm'}
-                    active={sortStore.value === option}
+                    active={sortValue === option}
                     onclick={() => sortStore.set(option)}
                     class="tracking-wide px-0"
                 >
diff --git a/src/routes/Page.svelte b/src/routes/Home.svelte
similarity index 81%
rename from src/routes/Page.svelte
rename to src/routes/Home.svelte
index 00481d6..dfd42ef 100644
--- a/src/routes/Page.svelte
+++ b/src/routes/Home.svelte
@@ -1,6 +1,6 @@
 <!--
-    Component: Page
-    Description: The main page component of the application.
+    Component: Home
+    Root route — comparison workspace.
 -->
 <script lang="ts">
 import { ComparisonView } from '$widgets/ComparisonView';
diff --git a/src/routes/Redirect.svelte b/src/routes/Redirect.svelte
new file mode 100644
index 0000000..d623410
--- /dev/null
+++ b/src/routes/Redirect.svelte
@@ -0,0 +1,10 @@
+<!--
+    Component: Redirect
+    Mounts only when an unmatched route is hit; immediately replaces the URL
+    with the home route. Kept until additional routes exist.
+-->
+<script lang="ts">
+import { navigate } from './router';
+
+navigate('/', { replace: true });
+</script>
diff --git a/src/routes/index.ts b/src/routes/index.ts
new file mode 100644
index 0000000..1cfa066
--- /dev/null
+++ b/src/routes/index.ts
@@ -0,0 +1,7 @@
+export {
+    isActive,
+    navigate,
+    p,
+    preload,
+    route,
+} from './router';
diff --git a/src/routes/router.ts b/src/routes/router.ts
new file mode 100644
index 0000000..4c3ce68
--- /dev/null
+++ b/src/routes/router.ts
@@ -0,0 +1,24 @@
+import { createRouter } from 'sv-router';
+import Home from './Home.svelte';
+
+/**
+ * Single-page router for glyphdiff.
+ *
+ * Currently exposes one route; structure exists so additional routes can be
+ * added without touching the app shell.
+ */
+export const {
+    isActive,
+    navigate,
+    p,
+    preload,
+    route,
+} = createRouter({
+    '/': Home,
+    /**
+     * Any unmatched path redirects to home until additional routes exist.
+     * Lazy-loaded so `router` doesn't statically import `Redirect`, which
+     * imports `navigate` from here — breaks the import cycle.
+     */
+    '*notfound': () => import('./Redirect.svelte'),
+});
diff --git a/src/shared/api/nonRetryableError.ts b/src/shared/api/nonRetryableError.ts
new file mode 100644
index 0000000..7ce5a3e
--- /dev/null
+++ b/src/shared/api/nonRetryableError.ts
@@ -0,0 +1,14 @@
+/**
+ * Marker base class for errors that retrying will never fix — schema-validation
+ * failures, unauthorized responses, contract violations, etc.
+ *
+ * The queryClient retry handler short-circuits when it sees this; without it,
+ * a non-transient backend bug pins the UI through the full retry budget
+ * (default 3× exponential backoff ≈ 7s).
+ *
+ * Lives in its own module — free of `@tanstack/query-core` — so error types that
+ * extend it (e.g. `FontResponseError`) can be imported without dragging the
+ * TanStack client and its eager `new QueryClient()` instantiation into the
+ * importer's module graph. See the barrel-coupling notes in the FSD audit.
+ */
+export class NonRetryableError extends Error {}
diff --git a/src/shared/api/queryClient.ts b/src/shared/api/queryClient.ts
index 8e18293..95ba830 100644
--- a/src/shared/api/queryClient.ts
+++ b/src/shared/api/queryClient.ts
@@ -1,14 +1,5 @@
 import { QueryClient } from '@tanstack/query-core';
-
-/**
- * Marker base class for errors that retrying will never fix — schema-validation
- * failures, unauthorized responses, contract violations, etc.
- *
- * The queryClient retry handler short-circuits when it sees this; without it,
- * a non-transient backend bug pins the UI through the full retry budget
- * (default 3× exponential backoff ≈ 7s).
- */
-export class NonRetryableError extends Error {}
+import { NonRetryableError } from './nonRetryableError';
 
 /**
  * Data remains fresh for this long after fetch. Stores that override
@@ -36,11 +27,16 @@ export const QUERY_RETRY_BASE_DELAY_MS = 1000;
  */
 export const QUERY_RETRY_MAX_DELAY_MS = 30000;
 
+let queryClientInstance: QueryClient | undefined;
+
 /**
- * TanStack Query client instance
+ * Shared TanStack Query client (lazy singleton).
  *
- * Configured for optimal caching and refetching behavior.
- * Used by all font stores for data fetching and caching.
+ * Construction is deferred to the first call so importing this module is inert:
+ * module eval runs no `new QueryClient()`, so the module is genuinely
+ * side-effect-free and needs no `sideEffects` allowlist exception. The
+ * app-layer `QueryProvider` is the first caller; every store reuses the same
+ * instance. Matches the lazy-accessor pattern used by the font stores.
  *
  * Cache behavior:
  * - Data stays fresh for 5 minutes (staleTime)
@@ -48,30 +44,32 @@ export const QUERY_RETRY_MAX_DELAY_MS = 30000;
  * - No refetch on window focus (reduces unnecessary network requests)
  * - 3 retries with exponential backoff on failure
  */
-export const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            staleTime: DEFAULT_QUERY_STALE_TIME_MS,
-            gcTime: DEFAULT_QUERY_GC_TIME_MS,
-            /**
-             * Don't refetch when window regains focus
-             */
-            refetchOnWindowFocus: false,
-            /**
-             * Refetch on mount if data is stale
-             */
-            refetchOnMount: true,
-            retry: (failureCount, error) => {
-                if (error instanceof NonRetryableError) {
-                    return false;
-                }
-                return failureCount < QUERY_RETRY_COUNT;
+export function getQueryClient(): QueryClient {
+    return (queryClientInstance ??= new QueryClient({
+        defaultOptions: {
+            queries: {
+                staleTime: DEFAULT_QUERY_STALE_TIME_MS,
+                gcTime: DEFAULT_QUERY_GC_TIME_MS,
+                /**
+                 * Don't refetch when window regains focus
+                 */
+                refetchOnWindowFocus: false,
+                /**
+                 * Refetch on mount if data is stale
+                 */
+                refetchOnMount: true,
+                retry: (failureCount, error) => {
+                    if (error instanceof NonRetryableError) {
+                        return false;
+                    }
+                    return failureCount < QUERY_RETRY_COUNT;
+                },
+                /**
+                 * Exponential backoff: 1s, 2s, 4s, 8s... capped at 30s
+                 */
+                retryDelay: attemptIndex =>
+                    Math.min(QUERY_RETRY_BASE_DELAY_MS * 2 ** attemptIndex, QUERY_RETRY_MAX_DELAY_MS),
             },
-            /**
-             * Exponential backoff: 1s, 2s, 4s, 8s... capped at 30s
-             */
-            retryDelay: attemptIndex =>
-                Math.min(QUERY_RETRY_BASE_DELAY_MS * 2 ** attemptIndex, QUERY_RETRY_MAX_DELAY_MS),
         },
-    },
-});
+    }));
+}
diff --git a/src/shared/lib/helpers/BaseQueryStore.svelte.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
similarity index 92%
rename from src/shared/lib/helpers/BaseQueryStore.svelte.ts
rename to src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
index c50cb8a..ee0a3ea 100644
--- a/src/shared/lib/helpers/BaseQueryStore.svelte.ts
+++ b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
@@ -1,4 +1,4 @@
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
 import {
     QueryObserver,
     type QueryObserverOptions,
@@ -20,7 +20,7 @@ export abstract class BaseQueryStore<TData, TError = Error> {
     #unsubscribe: () => void;
 
     constructor(options: QueryObserverOptions<TData, TError, TData, any, any>) {
-        this.#observer = new QueryObserver(queryClient, options);
+        this.#observer = new QueryObserver(getQueryClient(), options);
         this.#unsubscribe = this.#observer.subscribe(result => {
             this.#result = result;
         });
diff --git a/src/shared/lib/helpers/BaseQueryStore.test.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
similarity index 96%
rename from src/shared/lib/helpers/BaseQueryStore.test.ts
rename to src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
index 00b8ea0..31654c7 100644
--- a/src/shared/lib/helpers/BaseQueryStore.test.ts
+++ b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
@@ -1,4 +1,6 @@
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import {
     beforeEach,
     describe,
diff --git a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts b/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
deleted file mode 100644
index 1816218..0000000
--- a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
+++ /dev/null
@@ -1,360 +0,0 @@
-import {
-    type PreparedTextWithSegments,
-    layoutWithLines,
-    prepareWithSegments,
-} from '@chenglou/pretext';
-
-/**
- * Width of the character morph "halo" around the slider thumb, in percent
- * of container width. Characters within this window get partial blending
- * instead of a hard A→B flip.
- */
-const CHAR_PROXIMITY_RANGE_PCT = 5;
-
-/**
- * Default render size in px when callers omit the `size` arg on `layout()`.
- * Kept as a local constant to avoid pulling `$entities/Font` into
- * `$shared/lib` (would create an FSD-illegal upward import cycle).
- */
-const DEFAULT_RENDER_SIZE_PX = 16;
-
-/**
- * A single laid-out line produced by dual-font comparison layout.
- *
- * Line breaking is determined by the unified worst-case widths, so both fonts
- * always break at identical positions. Per-character `xA`/`xB` offsets reflect
- * each font's actual advance widths independently.
- */
-export interface ComparisonLine {
-    /**
-     * Full text of this line as returned by pretext.
-     */
-    text: string;
-    /**
-     * Rendered width of this line in pixels — maximum across font A and font B.
-     */
-    width: number;
-    /**
-     * Individual character metadata for both fonts in this line
-     */
-    chars: Array<{
-        /**
-         * The grapheme cluster string (may be >1 code unit for emoji, etc.).
-         */
-        char: string;
-        /**
-         * X offset from the start of the line in font A, in pixels.
-         */
-        xA: number;
-        /**
-         * Advance width of this grapheme in font A, in pixels.
-         */
-        widthA: number;
-        /**
-         * X offset from the start of the line in font B, in pixels.
-         */
-        xB: number;
-        /**
-         * Advance width of this grapheme in font B, in pixels.
-         */
-        widthB: number;
-    }>;
-}
-
-/**
- * Aggregated output of a dual-font layout pass.
- */
-export interface ComparisonResult {
-    /**
-     * Per-line grapheme data for both fonts. Empty when input text is empty.
-     */
-    lines: ComparisonLine[];
-    /**
-     * Total height in pixels. Equals `lines.length * lineHeight` (pretext guarantee).
-     */
-    totalHeight: number;
-}
-
-/**
- * Dual-font text layout engine backed by `@chenglou/pretext`.
- *
- * Computes identical line breaks for two fonts simultaneously by constructing a
- * "unified" prepared-text object whose per-glyph widths are the worst-case maximum
- * of font A and font B. This guarantees that both fonts wrap at exactly the same
- * positions, making side-by-side or slider comparison visually coherent.
- *
- * **Two-level caching strategy**
- * 1. Font-change cache (`#preparedA`, `#preparedB`, `#unifiedPrepared`): rebuilt only
- *    when `text`, `fontA`, or `fontB` changes. `prepareWithSegments` is expensive
- *    (canvas measurement), so this avoids re-measuring during slider interaction.
- * 2. Layout cache (`#lastResult`): rebuilt when `width` or `lineHeight` changes but
- *    the fonts have not changed. Line-breaking is cheap relative to measurement, but
- *    still worth skipping on every render tick.
- *
- * **`as any` casts:** `PreparedTextWithSegments` exposes only the `segments` field in
- * its public TypeScript type. The numeric arrays (`widths`, `breakableFitAdvances`,
- * `lineEndFitAdvances`, `lineEndPaintAdvances`) are internal implementation details of
- * pretext that are not part of the published type signature. The casts are required to
- * access these fields; they are verified against the pretext source at
- * `node_modules/@chenglou/pretext/src/layout.ts`.
- */
-export class CharacterComparisonEngine {
-    #segmenter: Intl.Segmenter;
-
-    // Cached prepared data
-    #preparedA: PreparedTextWithSegments | null = null;
-    #preparedB: PreparedTextWithSegments | null = null;
-    #unifiedPrepared: PreparedTextWithSegments | null = null;
-
-    #lastText = '';
-    #lastFontA = '';
-    #lastFontB = '';
-    #lastSpacing = 0;
-    #lastSize = 0;
-
-    // Cached layout results
-    #lastWidth = -1;
-    #lastLineHeight = -1;
-    #lastResult = $state<ComparisonResult | null>(null);
-
-    constructor(locale?: string) {
-        this.#segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
-    }
-
-    /**
-     * Lay out `text` using both fonts within `width` pixels.
-     *
-     * Line breaks are determined by the worst-case (maximum) glyph widths across
-     * both fonts, so both fonts always wrap at identical positions.
-     *
-     * @param text       Raw text to lay out.
-     * @param fontA      CSS font string for the first font: `"weight sizepx \"family\""`.
-     * @param fontB      CSS font string for the second font: `"weight sizepx \"family\""`.
-     * @param width      Available line width in pixels.
-     * @param lineHeight Line height in pixels (passed directly to pretext).
-     * @param spacing    Letter spacing in em (from typography settings).
-     * @param size       Current font size in pixels (used to convert spacing em to px).
-     * @returns          Per-line grapheme data for both fonts. Empty `lines` when `text` is empty.
-     */
-    layout(
-        text: string,
-        fontA: string,
-        fontB: string,
-        width: number,
-        lineHeight: number,
-        spacing: number = 0,
-        size: number = DEFAULT_RENDER_SIZE_PX,
-    ): ComparisonResult {
-        if (!text) {
-            return { lines: [], totalHeight: 0 };
-        }
-
-        const spacingPx = spacing * size;
-
-        const isFontChange = text !== this.#lastText
-            || fontA !== this.#lastFontA
-            || fontB !== this.#lastFontB
-            || spacing !== this.#lastSpacing
-            || size !== this.#lastSize;
-
-        const isLayoutChange = width !== this.#lastWidth || lineHeight !== this.#lastLineHeight;
-
-        if (!isFontChange && !isLayoutChange && this.#lastResult) {
-            return this.#lastResult;
-        }
-
-        // 1. Prepare (or use cache)
-        if (isFontChange) {
-            this.#preparedA = prepareWithSegments(text, fontA);
-            this.#preparedB = prepareWithSegments(text, fontB);
-            this.#unifiedPrepared = this.#createUnifiedPrepared(this.#preparedA, this.#preparedB, spacingPx);
-
-            this.#lastText = text;
-            this.#lastFontA = fontA;
-            this.#lastFontB = fontB;
-            this.#lastSpacing = spacing;
-            this.#lastSize = size;
-        }
-
-        if (!this.#unifiedPrepared || !this.#preparedA || !this.#preparedB) {
-            return { lines: [], totalHeight: 0 };
-        }
-
-        // 2. Layout using the unified widths.
-        // `PreparedTextWithSegments` only exposes `segments` in its public type; cast to `any`
-        // so pretext's layoutWithLines can read the internal numeric arrays at runtime.
-        const { lines, height } = layoutWithLines(this.#unifiedPrepared as any, width, lineHeight);
-
-        // 3. Map results back to both fonts
-        const resultLines: ComparisonLine[] = lines.map(line => {
-            const chars: ComparisonLine['chars'] = [];
-            let currentXA = 0;
-            let currentXB = 0;
-
-            const start = line.start;
-            const end = line.end;
-
-            // Cast to `any`: accessing internal numeric arrays not in the public type signature.
-            const intA = this.#preparedA as any;
-            const intB = this.#preparedB as any;
-
-            for (let sIdx = start.segmentIndex; sIdx <= end.segmentIndex; sIdx++) {
-                const segmentText = this.#preparedA!.segments[sIdx];
-                if (segmentText === undefined) {
-                    continue;
-                }
-
-                const graphemes = Array.from(this.#segmenter.segment(segmentText), s => s.segment);
-
-                const advA = intA.breakableFitAdvances[sIdx];
-                const advB = intB.breakableFitAdvances[sIdx];
-
-                const gStart = sIdx === start.segmentIndex ? start.graphemeIndex : 0;
-                const gEnd = sIdx === end.segmentIndex ? end.graphemeIndex : graphemes.length;
-
-                for (let gIdx = gStart; gIdx < gEnd; gIdx++) {
-                    const char = graphemes[gIdx];
-                    let wA = advA != null ? advA[gIdx]! : intA.widths[sIdx]!;
-                    let wB = advB != null ? advB[gIdx]! : intB.widths[sIdx]!;
-
-                    // Apply letter spacing (tracking) to the width of each character
-                    wA += spacingPx;
-                    wB += spacingPx;
-
-                    chars.push({
-                        char,
-                        xA: currentXA,
-                        widthA: wA,
-                        xB: currentXB,
-                        widthB: wB,
-                    });
-                    currentXA += wA;
-                    currentXB += wB;
-                }
-            }
-
-            return {
-                text: line.text,
-                width: line.width,
-                chars,
-            };
-        });
-
-        this.#lastWidth = width;
-        this.#lastLineHeight = lineHeight;
-        this.#lastResult = {
-            lines: resultLines,
-            totalHeight: height,
-        };
-
-        return this.#lastResult;
-    }
-
-    /**
-     * Calculates character states for an entire line in a single sequential pass.
-     *
-     * Walks characters left-to-right, accumulating the running x position using
-     * each character's actual rendered width: `widthB` for already-morphed characters
-     * (isPast=true) and `widthA` for upcoming ones. This ensures thresholds stay
-     * aligned with the visual DOM layout even when the two fonts have different widths.
-     *
-     * @param line           A single laid-out line from the last layout result.
-     * @param sliderPos      Current slider position as a percentage (0–100) of `containerWidth`.
-     * @param containerWidth Total container width in pixels.
-     * @returns              Per-character `proximity` and `isPast` in the same order as `line.chars`.
-     */
-    getLineCharStates(
-        line: ComparisonLine,
-        sliderPos: number,
-        containerWidth: number,
-    ): Array<{ proximity: number; isPast: boolean }> {
-        if (!line) {
-            return [];
-        }
-        const chars = line.chars;
-        const n = chars.length;
-        const sliderX = (sliderPos / 100) * containerWidth;
-        const range = CHAR_PROXIMITY_RANGE_PCT;
-        // Prefix sums of widthA (left chars will be past → use widthA).
-        // Suffix sums of widthB (right chars will not be past → use widthB).
-        // This lets us compute, for each char i, what the total line width and
-        // char center would be at the exact moment the slider crosses that char:
-        //   left side (0..i-1) already past → font A widths
-        //   right side (i+1..n-1) not yet past → font B widths
-        const prefA = new Float64Array(n + 1);
-        const sufB = new Float64Array(n + 1);
-        for (let i = 0; i < n; i++) {
-            prefA[i + 1] = prefA[i] + chars[i].widthA;
-        }
-        for (let i = n - 1; i >= 0; i--) {
-            sufB[i] = sufB[i + 1] + chars[i].widthB;
-        }
-        // Per-char threshold: slider x at which this char should toggle isPast.
-        const thresholds = new Float64Array(n);
-        for (let i = 0; i < n; i++) {
-            const totalWidth = prefA[i] + chars[i].widthA + sufB[i + 1];
-            const xOffset = (containerWidth - totalWidth) / 2;
-            thresholds[i] = xOffset + prefA[i] + chars[i].widthA / 2;
-        }
-        // Determine isPast for each char at the current slider position.
-        const isPastArr = new Uint8Array(n);
-        for (let i = 0; i < n; i++) {
-            isPastArr[i] = sliderX > thresholds[i] ? 1 : 0;
-        }
-        // Compute visual positions based on actual rendered widths (font A if past, B if not).
-        const totalRendered = chars.reduce((s, c, i) => s + (isPastArr[i] ? c.widthA : c.widthB), 0);
-        const xOffset = (containerWidth - totalRendered) / 2;
-        let currentX = xOffset;
-
-        return chars.map((char, i) => {
-            const isPast = isPastArr[i] === 1;
-            const charWidth = isPast ? char.widthA : char.widthB;
-            const visualCenter = currentX + charWidth / 2;
-            const charGlobalPercent = (visualCenter / containerWidth) * 100;
-            const distance = Math.abs(sliderPos - charGlobalPercent);
-            const proximity = Math.max(0, 1 - distance / range);
-            currentX += charWidth;
-            return { proximity, isPast };
-        });
-    }
-
-    /**
-     * Internal helper to merge two prepared texts into a "worst-case" unified version
-     */
-    #createUnifiedPrepared(
-        a: PreparedTextWithSegments,
-        b: PreparedTextWithSegments,
-        spacingPx: number = 0,
-    ): PreparedTextWithSegments {
-        // Cast to `any`: accessing internal numeric arrays not in the public type signature.
-        const intA = a as any;
-        const intB = b as any;
-
-        const unified = { ...intA };
-
-        unified.widths = intA.widths.map((w: number, i: number) => Math.max(w, intB.widths[i]) + spacingPx);
-        unified.lineEndFitAdvances = intA.lineEndFitAdvances.map((w: number, i: number) =>
-            Math.max(w, intB.lineEndFitAdvances[i]) + spacingPx
-        );
-        unified.lineEndPaintAdvances = intA.lineEndPaintAdvances.map((w: number, i: number) =>
-            Math.max(w, intB.lineEndPaintAdvances[i]) + spacingPx
-        );
-
-        unified.breakableFitAdvances = intA.breakableFitAdvances.map((advA: number[] | null, i: number) => {
-            const advB = intB.breakableFitAdvances[i];
-            if (!advA && !advB) {
-                return null;
-            }
-            if (!advA) {
-                return advB.map((w: number) => w + spacingPx);
-            }
-            if (!advB) {
-                return advA.map((w: number) => w + spacingPx);
-            }
-
-            return advA.map((w: number, j: number) => Math.max(w, advB[j]) + spacingPx);
-        });
-
-        return unified;
-    }
-}
diff --git a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts b/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
deleted file mode 100644
index 09a4f5f..0000000
--- a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-// @vitest-environment jsdom
-import { clearCache } from '@chenglou/pretext';
-import {
-    beforeEach,
-    describe,
-    expect,
-    it,
-} from 'vitest';
-import { installCanvasMock } from '../__mocks__/canvas';
-import { CharacterComparisonEngine } from './CharacterComparisonEngine.svelte';
-
-// FontA: 10px per character. FontB: 15px per character.
-// The mock dispatches on whether the font string contains 'FontA' or 'FontB'.
-const FONT_A_WIDTH = 10;
-const FONT_B_WIDTH = 15;
-
-function fontWidthFactory(font: string, text: string): number {
-    const perChar = font.includes('FontA') ? FONT_A_WIDTH : FONT_B_WIDTH;
-    return text.length * perChar;
-}
-
-describe('CharacterComparisonEngine', () => {
-    let engine: CharacterComparisonEngine;
-
-    beforeEach(() => {
-        installCanvasMock(fontWidthFactory);
-        clearCache();
-        engine = new CharacterComparisonEngine();
-    });
-
-    it('returns empty result for empty string', () => {
-        const result = engine.layout('', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        expect(result.lines).toHaveLength(0);
-        expect(result.totalHeight).toBe(0);
-    });
-
-    it('uses worst-case width across both fonts to determine line breaks', () => {
-        // 'AB CD' — two 2-char words separated by a space.
-        // FontA: 'AB'=20px, 'CD'=20px. Both fit in 25px? No: 'AB CD' = 50px total.
-        // FontB: 'AB'=30px, 'CD'=30px. Width 35px forces wrap after 'AB '.
-        // Unified must use FontB widths — so it must wrap at the same place FontB wraps.
-        const result = engine.layout('AB CD', '400 16px "FontA"', '400 16px "FontB"', 35, 20);
-        expect(result.lines.length).toBeGreaterThan(1);
-        // First line text must not include both words.
-        expect(result.lines[0].text).not.toContain('CD');
-    });
-
-    it('provides xA and xB offsets for both fonts on a single line', () => {
-        // 'ABC' fits in 500px for both fonts.
-        // FontA: A@0(w=10), B@10(w=10), C@20(w=10)
-        // FontB: A@0(w=15), B@15(w=15), C@30(w=15)
-        const result = engine.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const chars = result.lines[0].chars;
-
-        expect(chars).toHaveLength(3);
-
-        expect(chars[0].xA).toBe(0);
-        expect(chars[0].widthA).toBe(FONT_A_WIDTH);
-        expect(chars[0].xB).toBe(0);
-        expect(chars[0].widthB).toBe(FONT_B_WIDTH);
-
-        expect(chars[1].xA).toBe(FONT_A_WIDTH); // 10
-        expect(chars[1].widthA).toBe(FONT_A_WIDTH);
-        expect(chars[1].xB).toBe(FONT_B_WIDTH); // 15
-        expect(chars[1].widthB).toBe(FONT_B_WIDTH);
-
-        expect(chars[2].xA).toBe(FONT_A_WIDTH * 2); // 20
-        expect(chars[2].xB).toBe(FONT_B_WIDTH * 2); // 30
-    });
-
-    it('xA positions are monotonically increasing', () => {
-        const result = engine.layout('ABCDE', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const chars = result.lines[0].chars;
-        for (let i = 1; i < chars.length; i++) {
-            expect(chars[i].xA).toBeGreaterThan(chars[i - 1].xA);
-        }
-    });
-
-    it('xB positions are monotonically increasing', () => {
-        const result = engine.layout('ABCDE', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const chars = result.lines[0].chars;
-        for (let i = 1; i < chars.length; i++) {
-            expect(chars[i].xB).toBeGreaterThan(chars[i - 1].xB);
-        }
-    });
-
-    it('returns cached result when called again with same arguments', () => {
-        const r1 = engine.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const r2 = engine.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        expect(r2).toBe(r1); // strict reference equality — same object
-    });
-
-    it('re-computes when text changes', () => {
-        const r1 = engine.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const r2 = engine.layout('DEF', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        expect(r2).not.toBe(r1);
-        expect(r2.lines[0].text).not.toBe(r1.lines[0].text);
-    });
-
-    it('re-computes when width changes', () => {
-        const r1 = engine.layout('Hello World', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const r2 = engine.layout('Hello World', '400 16px "FontA"', '400 16px "FontB"', 60, 20);
-        expect(r2).not.toBe(r1);
-    });
-
-    it('re-computes when fontA changes', () => {
-        const r1 = engine.layout('ABC', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const r2 = engine.layout('ABC', '400 24px "FontA"', '400 16px "FontB"', 500, 20);
-        expect(r2).not.toBe(r1);
-    });
-
-    it('getLineCharStates returns proximity 1 when slider is exactly over char center', () => {
-        const containerWidth = 500;
-        const result = engine.layout('A', '400 16px "FontA"', '400 16px "FontB"', containerWidth, 20);
-        // Single char: no neighbors → totalWidth = widthA, threshold = containerWidth/2.
-        // When isPast=false, visual center = (containerWidth - widthB)/2 + widthB/2 = containerWidth/2.
-        // So proximity=1 at exactly 50%.
-        const charPercent = 50;
-
-        const states = engine.getLineCharStates(result.lines[0], charPercent, containerWidth);
-        expect(states[0]?.proximity).toBe(1);
-        expect(states[0]?.isPast).toBe(false);
-    });
-
-    it('getLineCharStates returns proximity 0 when slider is far from char', () => {
-        const result = engine.layout('A', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const states = engine.getLineCharStates(result.lines[0], 0, 500);
-        expect(states[0]?.proximity).toBe(0);
-    });
-
-    it('getLineCharStates isPast is true when slider has passed char center', () => {
-        const result = engine.layout('A', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const states = engine.getLineCharStates(result.lines[0], 100, 500);
-        expect(states[0]?.isPast).toBe(true);
-    });
-
-    it('getLineCharStates returns empty array for out-of-range lineIndex', () => {
-        const result = engine.layout('A', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        // Passing an undefined object because the index doesn't exist.
-        const states = engine.getLineCharStates(result.lines[99], 50, 500);
-        expect(states).toEqual([]);
-    });
-
-    it('getLineCharStates returns empty array before layout() has been called', () => {
-        // Passing an undefined object because layout() hasn't been called.
-        const states = engine.getLineCharStates(undefined as any, 50, 500);
-        expect(states).toEqual([]);
-    });
-
-    it('getLineCharStates returns safe defaults for all chars', () => {
-        const result = engine.layout('A', '400 16px "FontA"', '400 16px "FontB"', 500, 20);
-        const states = engine.getLineCharStates(result.lines[0], 50, 500);
-        expect(states.length).toBeGreaterThan(0);
-        for (const s of states) {
-            expect(s.proximity).toBeGreaterThanOrEqual(0);
-            expect(s.proximity).toBeLessThanOrEqual(1);
-            expect(typeof s.isPast).toBe('boolean');
-        }
-    });
-});
diff --git a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts b/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
deleted file mode 100644
index 3b7b1f9..0000000
--- a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import {
-    layoutWithLines,
-    prepareWithSegments,
-} from '@chenglou/pretext';
-
-/**
- * A single laid-out line of text, with per-grapheme x offsets and widths.
- *
- * `chars` is indexed by grapheme cluster (not UTF-16 code unit), so emoji
- * sequences and combining characters each produce exactly one entry.
- */
-export interface LayoutLine {
-    /**
-     * Full text of this line as returned by pretext.
-     */
-    text: string;
-    /**
-     * Rendered width of this line in pixels.
-     */
-    width: number;
-    /**
-     * Individual character metadata for this line
-     */
-    chars: Array<{
-        /**
-         * The grapheme cluster string (may be >1 code unit for emoji, etc.).
-         */
-        char: string;
-        /**
-         * X offset from the start of the line, in pixels.
-         */
-        x: number;
-        /**
-         * Advance width of this grapheme, in pixels.
-         */
-        width: number;
-    }>;
-}
-
-/**
- * Aggregated output of a single-font layout pass.
- */
-export interface LayoutResult {
-    /**
-     * Per-line grapheme data. Empty when input text is empty.
-     */
-    lines: LayoutLine[];
-    /**
-     * Total height in pixels. Equals `lines.length * lineHeight` (pretext guarantee).
-     */
-    totalHeight: number;
-}
-
-/**
- * Single-font text layout engine backed by `@chenglou/pretext`.
- *
- * Replaces the canvas-DOM hybrid `createCharacterComparison` for cases where
- * only one font is needed. For dual-font comparison use `CharacterComparisonEngine`.
- *
- * **Usage**
- * ```ts
- * const engine = new TextLayoutEngine();
- * const result = engine.layout('Hello World', '400 16px "Inter"', 320, 24);
- * // result.lines[0].chars → [{ char: 'H', x: 0, width: 9 }, ...]
- * ```
- *
- * **Font string format:** `"${weight} ${size}px \"${family}\""` — e.g. `'400 16px "Inter"'`.
- * This matches what SliderArea constructs from `typography.weight` and `typography.renderedSize`.
- *
- * **Canvas requirement:** pretext calls `document.createElement('canvas').getContext('2d')` on
- * first use and caches the context for the process lifetime. Tests must install a canvas mock
- * (see `__mocks__/canvas.ts`) before the first `layout()` call.
- *
- * @deprecated No live consumers remain — the only previous caller
- * (`createFontRowSizeResolver`) now invokes pretext's `prepare` + `layout`
- * directly (per pretext's "hot-path resize function" guidance). If you need
- * single-font height-only measurement, use `prepare` + `layout` from
- * `@chenglou/pretext` directly. If you need per-grapheme x/width data, see
- * `CharacterComparisonEngine` (dual-font) or revive a slimmer wrapper.
- * Slated for removal once it has been absent from `main` for a release cycle.
- */
-export class TextLayoutEngine {
-    /**
-     * Grapheme segmenter used to split segment text into individual clusters.
-     *
-     * Pretext maintains its own internal segmenter for line-breaking decisions.
-     * We keep a separate one here so we can iterate graphemes in `layout()`
-     * without depending on pretext internals — the two segmenters produce
-     * identical boundaries because both use `{ granularity: 'grapheme' }`.
-     */
-    #segmenter: Intl.Segmenter;
-
-    /**
-     * @param locale BCP 47 language tag passed to Intl.Segmenter. Defaults to the runtime locale.
-     */
-    constructor(locale?: string) {
-        this.#segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
-    }
-
-    /**
-     * Lay out `text` in the given `font` within `width` pixels.
-     *
-     * @param text       Raw text to lay out.
-     * @param font       CSS font string: `"weight sizepx \"family\""`.
-     * @param width      Available line width in pixels.
-     * @param lineHeight Line height in pixels (passed directly to pretext).
-     * @returns          Per-line grapheme data. Empty `lines` when `text` is empty.
-     */
-    layout(text: string, font: string, width: number, lineHeight: number): LayoutResult {
-        if (!text) {
-            return { lines: [], totalHeight: 0 };
-        }
-
-        // prepareWithSegments measures the text and builds the segment data structure
-        // (widths, breakableFitAdvances, etc.) that the line-walker consumes.
-        const prepared = prepareWithSegments(text, font);
-        const { lines, height } = layoutWithLines(prepared, width, lineHeight);
-
-        // `PreparedTextWithSegments` has these fields in its public type definition
-        // but the TypeScript signature only exposes `segments`. We cast to `any` to
-        // access the parallel numeric arrays — they are documented in the plan and
-        // verified against the pretext source at node_modules/@chenglou/pretext/src/layout.ts.
-        const internal = prepared as any;
-        const breakableFitAdvances = internal.breakableFitAdvances as (number[] | null)[];
-        const widths = internal.widths as number[];
-
-        const resultLines: LayoutLine[] = lines.map(line => {
-            const chars: LayoutLine['chars'] = [];
-            let currentX = 0;
-
-            const start = line.start;
-            const end = line.end;
-
-            // Walk every segment that falls within this line's [start, end] cursors.
-            // Both cursors are grapheme-level: start is inclusive, end is exclusive.
-            for (let sIdx = start.segmentIndex; sIdx <= end.segmentIndex; sIdx++) {
-                const segmentText = prepared.segments[sIdx];
-                if (segmentText === undefined) {
-                    continue;
-                }
-
-                const graphemes = Array.from(this.#segmenter.segment(segmentText), s => s.segment);
-                const advances = breakableFitAdvances[sIdx];
-
-                // For the first and last segments of the line the cursor may point
-                // into the middle of the segment — respect those boundaries.
-                // All intermediate segments are walked in full (gStart=0, gEnd=length).
-                const gStart = sIdx === start.segmentIndex ? start.graphemeIndex : 0;
-                const gEnd = sIdx === end.segmentIndex ? end.graphemeIndex : graphemes.length;
-
-                for (let gIdx = gStart; gIdx < gEnd; gIdx++) {
-                    const char = graphemes[gIdx];
-
-                    // `breakableFitAdvances[sIdx]` is an array of per-grapheme advance
-                    // widths when the segment has >1 grapheme (multi-character words).
-                    // It is `null` for single-grapheme segments (spaces, punctuation,
-                    // emoji, etc.) — in that case the entire segment width is attributed
-                    // to this single grapheme.
-                    const charWidth = advances != null ? advances[gIdx]! : widths[sIdx]!;
-
-                    chars.push({
-                        char,
-                        x: currentX,
-                        width: charWidth,
-                    });
-                    currentX += charWidth;
-                }
-            }
-
-            return {
-                text: line.text,
-                width: line.width,
-                chars,
-            };
-        });
-
-        return {
-            lines: resultLines,
-            // pretext guarantees height === lineCount * lineHeight (see layout.ts source).
-            totalHeight: height,
-        };
-    }
-}
diff --git a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.test.ts b/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.test.ts
deleted file mode 100644
index 7aeac46..0000000
--- a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-// @vitest-environment jsdom
-import { clearCache } from '@chenglou/pretext';
-import {
-    beforeEach,
-    describe,
-    expect,
-    it,
-} from 'vitest';
-import { installCanvasMock } from '../__mocks__/canvas';
-import { TextLayoutEngine } from './TextLayoutEngine.svelte';
-
-// Fixed-width mock: every segment is measured as (text.length * 10) px.
-// This is font-independent so we can reason about wrapping precisely.
-const CHAR_WIDTH = 10;
-
-describe('TextLayoutEngine', () => {
-    let engine: TextLayoutEngine;
-
-    beforeEach(() => {
-        // Install mock BEFORE any prepareWithSegments call.
-        // clearMeasurementCaches resets pretext's cached canvas context
-        // and segment metric caches so each test gets a clean slate.
-        installCanvasMock((_font, text) => text.length * CHAR_WIDTH);
-        clearCache();
-        engine = new TextLayoutEngine();
-    });
-
-    it('returns empty result for empty string', () => {
-        const result = engine.layout('', '400 16px "Inter"', 500, 20);
-        expect(result.lines).toHaveLength(0);
-        expect(result.totalHeight).toBe(0);
-    });
-
-    it('returns a single line when text fits within width', () => {
-        // 'ABC' = 3 chars × 10px = 30px, fits in 500px
-        const result = engine.layout('ABC', '400 16px "Inter"', 500, 20);
-        expect(result.lines).toHaveLength(1);
-        expect(result.lines[0].text).toBe('ABC');
-    });
-
-    it('breaks text into multiple lines when it exceeds width', () => {
-        // 'Hello World' — pretext will split at the space.
-        // 'Hello' = 50px, ' ' hangs, 'World' = 50px. Width = 60px forces wrap after 'Hello '.
-        const result = engine.layout('Hello World', '400 16px "Inter"', 60, 20);
-        expect(result.lines.length).toBeGreaterThan(1);
-        // First line must not exceed the container width.
-        expect(result.lines[0].width).toBeLessThanOrEqual(60);
-    });
-
-    it('assigns correct x positions to characters on a single line', () => {
-        // 'ABC': A=10px, B=10px, C=10px; all on one line in 500px container.
-        const result = engine.layout('ABC', '400 16px "Inter"', 500, 20);
-        const chars = result.lines[0].chars;
-
-        expect(chars).toHaveLength(3);
-        expect(chars[0].char).toBe('A');
-        expect(chars[0].x).toBe(0);
-        expect(chars[0].width).toBe(CHAR_WIDTH);
-
-        expect(chars[1].char).toBe('B');
-        expect(chars[1].x).toBe(CHAR_WIDTH);
-        expect(chars[1].width).toBe(CHAR_WIDTH);
-
-        expect(chars[2].char).toBe('C');
-        expect(chars[2].x).toBe(CHAR_WIDTH * 2);
-        expect(chars[2].width).toBe(CHAR_WIDTH);
-    });
-
-    it('x positions are monotonically increasing across a line', () => {
-        const result = engine.layout('ABCDE', '400 16px "Inter"', 500, 20);
-        const chars = result.lines[0].chars;
-        for (let i = 1; i < chars.length; i++) {
-            expect(chars[i].x).toBeGreaterThan(chars[i - 1].x);
-        }
-    });
-
-    it('each line has at least one char', () => {
-        const result = engine.layout('Hello World', '400 16px "Inter"', 60, 20);
-        for (const line of result.lines) {
-            expect(line.chars.length).toBeGreaterThan(0);
-        }
-    });
-
-    it('totalHeight equals lineCount * lineHeight', () => {
-        const lineHeight = 24;
-        const result = engine.layout('Hello World', '400 16px "Inter"', 60, lineHeight);
-        expect(result.totalHeight).toBe(result.lines.length * lineHeight);
-    });
-});
diff --git a/src/shared/lib/helpers/createPersistentStore/createPersistentStore.svelte.ts b/src/shared/lib/helpers/createPersistentStore/createPersistentStore.svelte.ts
index 028770c..368d8f9 100644
--- a/src/shared/lib/helpers/createPersistentStore/createPersistentStore.svelte.ts
+++ b/src/shared/lib/helpers/createPersistentStore/createPersistentStore.svelte.ts
@@ -1,66 +1,15 @@
 /**
- * Persistent localStorage-backed reactive state
+ * Reactive localStorage-backed state. Loads on init, saves on change via an
+ * $effect.root. Falls back to the default on SSR (no localStorage) and on JSON
+ * parse errors; swallows quota/write errors with a warning.
  *
- * Creates reactive state that automatically syncs with localStorage.
- * Values persist across browser sessions and are restored on page load.
+ * Owners that create this outside a component must call destroy() to dispose
+ * the save effect.
  *
- * Handles edge cases:
- * - SSR safety (no localStorage on server)
- * - JSON parse errors (falls back to default)
- * - Storage quota errors (logs warning, doesn't crash)
- *
- * @example
- * ```ts
- * // Store user preferences
- * const preferences = createPersistentStore('user-prefs', {
- *     theme: 'dark',
- *     fontSize: 16,
- *     sidebarOpen: true
- * });
- *
- * // Access reactive state
- * $: currentTheme = preferences.value.theme;
- *
- * // Update (auto-saves to localStorage)
- * preferences.value.theme = 'light';
- *
- * // Clear stored value
- * preferences.clear();
- * ```
- */
-
-/**
- * Creates a reactive store backed by localStorage
- *
- * The value is loaded from localStorage on initialization and automatically
- * saved whenever it changes. Uses Svelte 5's $effect for reactive sync.
- *
- * @param key - localStorage key for storing the value
- * @param defaultValue - Default value if no stored value exists
- * @returns Persistent store with getter/setter and clear method
- *
- * @example
- * ```ts
- * // Simple value
- * const counter = createPersistentStore('counter', 0);
- * counter.value++;
- *
- * // Complex object
- * interface Settings {
- *     theme: 'light' | 'dark';
- *     fontSize: number;
- * }
- * const settings = createPersistentStore<Settings>('app-settings', {
- *     theme: 'light',
- *     fontSize: 16
- * });
- * ```
+ * @param key - localStorage key
+ * @param defaultValue - value used when nothing is stored
  */
 export function createPersistentStore<T>(key: string, defaultValue: T) {
-    /**
-     * Load value from localStorage or return default
-     * Safely handles missing keys, parse errors, and SSR
-     */
     const loadFromStorage = (): T => {
         if (typeof window === 'undefined') {
             return defaultValue;
@@ -76,9 +25,13 @@ export function createPersistentStore<T>(key: string, defaultValue: T) {
 
     let value = $state<T>(loadFromStorage());
 
-    // Sync to storage whenever value changes
-    // Wrapped in $effect.root to prevent memory leaks
-    $effect.root(() => {
+    /**
+     * Sync to storage whenever value changes. The effect lives in an
+     * $effect.root so it outlives any component; the returned disposer is kept
+     * and run by destroy(), because an $effect.root with no disposer leaks for
+     * the life of the process.
+     */
+    const dispose = $effect.root(() => {
         $effect(() => {
             if (typeof window === 'undefined') {
                 return;
@@ -113,6 +66,15 @@ export function createPersistentStore<T>(key: string, defaultValue: T) {
             }
             value = defaultValue;
         },
+
+        /**
+         * Dispose the storage-sync effect. Owners that create a store outside a
+         * component (e.g. a singleton store class) must call this to avoid
+         * leaking the underlying $effect.root.
+         */
+        destroy() {
+            dispose();
+        },
     };
 }
 
diff --git a/src/shared/lib/helpers/createPersistentStore/createPersistentStore.test.ts b/src/shared/lib/helpers/createPersistentStore/createPersistentStore.test.ts
index 7435a2a..6ee6325 100644
--- a/src/shared/lib/helpers/createPersistentStore/createPersistentStore.test.ts
+++ b/src/shared/lib/helpers/createPersistentStore/createPersistentStore.test.ts
@@ -1,6 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
+import { flushSync } from 'svelte';
 import {
     afterEach,
     beforeEach,
@@ -376,4 +377,39 @@ describe('createPersistentStore', () => {
             expect(store.value[0].name).toBe('First');
         });
     });
+
+    describe('Lifecycle', () => {
+        it('persists value changes via the sync effect', () => {
+            const store = createPersistentStore(testKey, 'a');
+            const spy = vi.spyOn(mockLocalStorage, 'setItem');
+
+            store.value = 'b';
+            flushSync();
+
+            expect(spy).toHaveBeenCalledWith(testKey, JSON.stringify('b'));
+        });
+
+        it('stops persisting after destroy()', () => {
+            const store = createPersistentStore(testKey, 'a');
+            flushSync();
+            store.destroy();
+
+            const spy = vi.spyOn(mockLocalStorage, 'setItem');
+            store.value = 'c';
+            flushSync();
+
+            expect(spy).not.toHaveBeenCalled();
+            // reading still works after disposal
+            expect(store.value).toBe('c');
+        });
+
+        it('destroy() is safe to call repeatedly', () => {
+            const store = createPersistentStore(testKey, 'a');
+
+            expect(() => {
+                store.destroy();
+                store.destroy();
+            }).not.toThrow();
+        });
+    });
 });
diff --git a/src/shared/lib/helpers/createSingleton/createSingleton.test.ts b/src/shared/lib/helpers/createSingleton/createSingleton.test.ts
new file mode 100644
index 0000000..01efc82
--- /dev/null
+++ b/src/shared/lib/helpers/createSingleton/createSingleton.test.ts
@@ -0,0 +1,86 @@
+import {
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import { createSingleton } from './createSingleton';
+
+describe('createSingleton', () => {
+    it('does not call the factory until the first get (lazy)', () => {
+        const factory = vi.fn(() => ({ id: 1 }));
+        createSingleton(factory);
+        expect(factory).not.toHaveBeenCalled();
+    });
+
+    it('constructs on first get and memoizes the instance', () => {
+        const factory = vi.fn(() => ({ id: 1 }));
+        const singleton = createSingleton(factory);
+
+        const a = singleton.get();
+        const b = singleton.get();
+
+        expect(factory).toHaveBeenCalledTimes(1);
+        expect(a).toBe(b);
+    });
+
+    it('rebuilds a fresh instance after reset', () => {
+        let count = 0;
+        const singleton = createSingleton(() => ({ id: ++count }));
+
+        const first = singleton.get();
+        singleton.reset();
+        const second = singleton.get();
+
+        expect(first).not.toBe(second);
+        expect(second.id).toBe(2);
+    });
+
+    it('runs teardown once, with the live instance, on reset', () => {
+        const teardown = vi.fn();
+        const singleton = createSingleton(() => ({ id: 1 }), teardown);
+
+        const instance = singleton.get();
+        singleton.reset();
+
+        expect(teardown).toHaveBeenCalledTimes(1);
+        expect(teardown).toHaveBeenCalledWith(instance);
+    });
+
+    it('treats reset before any get as a no-op (no teardown, no throw)', () => {
+        const teardown = vi.fn();
+        const singleton = createSingleton(() => ({ id: 1 }), teardown);
+
+        expect(() => singleton.reset()).not.toThrow();
+        expect(teardown).not.toHaveBeenCalled();
+    });
+
+    it('does not run teardown again on a second consecutive reset', () => {
+        const teardown = vi.fn();
+        const singleton = createSingleton(() => ({ id: 1 }), teardown);
+
+        singleton.get();
+        singleton.reset();
+        singleton.reset();
+
+        expect(teardown).toHaveBeenCalledTimes(1);
+    });
+
+    it('works without a teardown', () => {
+        const singleton = createSingleton(() => ({ id: 1 }));
+
+        singleton.get();
+        expect(() => singleton.reset()).not.toThrow();
+        expect(singleton.get().id).toBe(1);
+    });
+
+    it('caches a falsy instance value without re-running the factory', () => {
+        const factory = vi.fn(() => undefined);
+        const singleton = createSingleton<undefined>(factory);
+
+        singleton.get();
+        singleton.get();
+
+        expect(factory).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/src/shared/lib/helpers/createSingleton/createSingleton.ts b/src/shared/lib/helpers/createSingleton/createSingleton.ts
new file mode 100644
index 0000000..ef8294c
--- /dev/null
+++ b/src/shared/lib/helpers/createSingleton/createSingleton.ts
@@ -0,0 +1,57 @@
+/**
+ * A lazily-constructed singleton accessor pair.
+ */
+export interface Singleton<T> {
+    /**
+     * Returns the instance, constructing it on the first call and reusing it
+     * thereafter.
+     */
+    get: () => T;
+    /**
+     * Tears down the current instance (if built) and clears it, so the next
+     * `get()` rebuilds. Used by specs to avoid shared state between tests.
+     */
+    reset: () => void;
+}
+
+/**
+ * Standardizes the lazy `getX()` / `__resetX()` singleton pattern used by the
+ * app's stores.
+ *
+ * The instance is built on the first `get()` and reused afterwards; `reset()`
+ * runs the optional teardown against the live instance and clears it. Building
+ * lazily keeps the owning module inert at import — construction happens only on
+ * first access, never at module eval.
+ *
+ * @param factory - Builds the instance on first access.
+ * @param teardown - Optional cleanup run against the live instance on reset
+ * (e.g. disposing an `$effect.root` via the instance's `destroy()`).
+ *
+ * @example
+ * ```ts
+ * const catalog = createSingleton(() => new FontCatalogStore({ limit: 50 }), c => c.destroy());
+ * export const getFontCatalog = catalog.get;
+ * export const __resetFontCatalog = catalog.reset;
+ * ```
+ */
+export function createSingleton<T>(factory: () => T, teardown?: (instance: T) => void): Singleton<T> {
+    let instance: T | undefined;
+    let initialized = false;
+
+    return {
+        get: () => {
+            if (!initialized) {
+                instance = factory();
+                initialized = true;
+            }
+            return instance as T;
+        },
+        reset: () => {
+            if (initialized) {
+                teardown?.(instance as T);
+            }
+            instance = undefined;
+            initialized = false;
+        },
+    };
+}
diff --git a/src/shared/lib/helpers/createTypographyControl/createTypographyControl.svelte.ts b/src/shared/lib/helpers/createTypographyControl/createTypographyControl.svelte.ts
deleted file mode 100644
index 8d225ce..0000000
--- a/src/shared/lib/helpers/createTypographyControl/createTypographyControl.svelte.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Numeric control with bounded values and step precision
- *
- * Creates a reactive control for numeric values that enforces min/max bounds
- * and rounds to a specific step increment. Commonly used for typography controls
- * like font size, line height, and letter spacing.
- *
- * @example
- * ```ts
- * const fontSize = createTypographyControl({
- *     value: 16,
- *     min: 12,
- *     max: 72,
- *     step: 1
- * });
- *
- * // Access current value
- * fontSize.value; // 16
- * fontSize.isAtMin; // false
- *
- * // Modify value (automatically clamped and rounded)
- * fontSize.increase();
- * fontSize.value = 100; // Will be clamped to max (72)
- * ```
- */
-
-import {
-    clampNumber,
-    roundToStepPrecision,
-} from '$shared/lib/utils';
-
-/**
- * Core numeric control configuration
- * Defines the bounds and stepping behavior for a control
- */
-export interface ControlDataModel {
-    /**
-     * Initial or current numeric value
-     */
-    value: number;
-    /**
-     * Lower inclusive bound
-     */
-    min: number;
-    /**
-     * Upper inclusive bound
-     */
-    max: number;
-    /**
-     * Precision for increment/decrement operations
-     */
-    step: number;
-}
-
-/**
- * Full control model including accessibility labels
- *
- * @template T - Type for the control identifier
- */
-export interface ControlModel<T extends string = string> extends ControlDataModel {
-    /**
-     * Unique string identifier for the control
-     */
-    id: T;
-    /**
-     * Label used by screen readers for the increase button
-     */
-    increaseLabel?: string;
-    /**
-     * Label used by screen readers for the decrease button
-     */
-    decreaseLabel?: string;
-    /**
-     * Overall label describing the control's purpose
-     */
-    controlLabel?: string;
-}
-
-/**
- * Creates a reactive numeric control with bounds and stepping
- *
- * The control automatically:
- * - Clamps values to the min/max range
- * - Rounds values to the step precision
- * - Tracks whether at min/max bounds
- *
- * @param initialState - Initial value, bounds, and step configuration
- * @returns Typography control instance with reactive state and methods
- *
- * @example
- * ```ts
- * // Font size control: 12-72px in 1px increments
- * const fontSize = createTypographyControl({
- *     value: 16,
- *     min: 12,
- *     max: 72,
- *     step: 1
- * });
- *
- * // Line height control: 1.0-2.0 in 0.1 increments
- * const lineHeight = createTypographyControl({
- *     value: 1.5,
- *     min: 1.0,
- *     max: 2.0,
- *     step: 0.1
- * });
- *
- * // Direct assignment (auto-clamped)
- * fontSize.value = 100; // Becomes 72 (max)
- * ```
- */
-export function createTypographyControl<T extends ControlDataModel>(
-    initialState: T,
-) {
-    let value = $state(initialState.value);
-    let max = $state(initialState.max);
-    let min = $state(initialState.min);
-    let step = $state(initialState.step);
-
-    // Derived state for boundary detection
-    const { isAtMax, isAtMin } = $derived({
-        isAtMax: value >= max,
-        isAtMin: value <= min,
-    });
-
-    return {
-        /**
-         * Clamped and rounded control value (reactive)
-         */
-        get value() {
-            return value;
-        },
-        set value(newValue) {
-            const rounded = roundToStepPrecision(clampNumber(newValue, min, max), step);
-            if (value !== rounded) {
-                value = rounded;
-            }
-        },
-
-        /**
-         * Upper limit for the control value
-         */
-        get max() {
-            return max;
-        },
-
-        /**
-         * Lower limit for the control value
-         */
-        get min() {
-            return min;
-        },
-
-        /**
-         * Configured step increment
-         */
-        get step() {
-            return step;
-        },
-
-        /**
-         * True if current value is equal to or greater than max
-         */
-        get isAtMax() {
-            return isAtMax;
-        },
-
-        /**
-         * True if current value is equal to or less than min
-         */
-        get isAtMin() {
-            return isAtMin;
-        },
-
-        /**
-         * Increase value by one step (clamped to max)
-         */
-        increase() {
-            value = roundToStepPrecision(
-                clampNumber(value + step, min, max),
-                step,
-            );
-        },
-
-        /**
-         * Decrease value by one step (clamped to min)
-         */
-        decrease() {
-            value = roundToStepPrecision(
-                clampNumber(value - step, min, max),
-                step,
-            );
-        },
-    };
-}
-
-/**
- * Type representing a typography control instance
- */
-export type TypographyControl = ReturnType<typeof createTypographyControl>;
diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index 949d991..7c6d3e1 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -156,7 +156,7 @@ export function createVirtualizer<T>(
     const offsets = $derived.by(() => {
         const count = options.count;
         // Implicit dependency on version signal
-        const v = _version;
+        const _v = _version;
         const result = new Float64Array(count);
         let accumulated = 0;
         for (let i = 0; i < count; i++) {
@@ -180,7 +180,7 @@ export function createVirtualizer<T>(
         // this derivation when the items array is replaced!
         const { count, data } = options;
         // Implicit dependency
-        const v = _version;
+        const _v = _version;
         if (count === 0 || containerHeight === 0 || !data) {
             return [];
         }
@@ -268,7 +268,6 @@ export function createVirtualizer<T>(
                 return rect.top + scrollY;
             };
 
-            let cachedOffsetTop = 0;
             let rafId: number | null = null;
             containerHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
 
@@ -292,14 +291,12 @@ export function createVirtualizer<T>(
             const handleResize = () => {
                 containerHeight = window.innerHeight;
                 elementOffsetTop = getElementOffset();
-                cachedOffsetTop = elementOffsetTop;
                 handleScroll();
             };
 
             // Initial setup
             requestAnimationFrame(() => {
                 elementOffsetTop = getElementOffset();
-                cachedOffsetTop = elementOffsetTop;
                 handleScroll();
             });
 
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index ba2bb77..17207d7 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -3,22 +3,19 @@
  *
  * Provides composable state management patterns for common UI needs:
  * - Filter management with multi-selection
- * - Typography controls with bounds and stepping
  * - Virtual scrolling for large lists
  * - Debounced state for search inputs
  * - Entity stores with O(1) lookups
- * - Character-by-character font comparison
  * - Persistent localStorage-backed state
  * - Responsive breakpoint tracking
  * - 3D perspective animations
  *
  * @example
  * ```ts
- * import { createFilter, createVirtualizer, createTypographyControl } from '$shared/lib/helpers';
+ * import { createFilter, createVirtualizer } from '$shared/lib/helpers';
  *
  * const filter = createFilter({ properties: [...] });
  * const virtualizer = createVirtualizer(() => ({ count: 1000, estimateSize: () => 50 }));
- * const control = createTypographyControl({ value: 16, min: 12, max: 72, step: 1 });
  * ```
  */
 
@@ -44,28 +41,6 @@ export {
     type Property,
 } from './createFilter/createFilter.svelte';
 
-/**
- * Bounded numeric controls
- */
-export {
-    /**
-     * Base numeric configuration
-     */
-    type ControlDataModel,
-    /**
-     * Extended model with labels
-     */
-    type ControlModel,
-    /**
-     * Reactive control factory
-     */
-    createTypographyControl,
-    /**
-     * Control instance type
-     */
-    type TypographyControl,
-} from './createTypographyControl/createTypographyControl.svelte';
-
 /**
  * List virtualization
  */
@@ -116,42 +91,6 @@ export {
     type EntityStore,
 } from './createEntityStore/createEntityStore.svelte';
 
-/**
- * Comparison logic
- */
-export {
-    /**
-     * Character-by-character comparison utility
-     */
-    CharacterComparisonEngine,
-    /**
-     * Single line of comparison results
-     */
-    type ComparisonLine,
-    /**
-     * Full comparison output
-     */
-    type ComparisonResult,
-} from './CharacterComparisonEngine/CharacterComparisonEngine.svelte';
-
-/**
- * Text layout
- */
-export {
-    /**
-     * Single line layout information
-     */
-    type LayoutLine as TextLayoutLine,
-    /**
-     * Full multi-line layout information
-     */
-    type LayoutResult as TextLayoutResult,
-    /**
-     * High-level text measurement engine
-     */
-    TextLayoutEngine,
-} from './TextLayoutEngine/TextLayoutEngine.svelte';
-
 /**
  * Persistence
  */
@@ -197,3 +136,23 @@ export {
      */
     type PerspectiveManager,
 } from './createPerspectiveManager/createPerspectiveManager.svelte';
+
+/**
+ * Lazy singletons
+ */
+export {
+    /**
+     * Lazy `getX()` / `__resetX()` singleton accessor factory
+     */
+    createSingleton,
+    /**
+     * Singleton accessor pair type
+     */
+    type Singleton,
+} from './createSingleton/createSingleton';
+
+/*
+ * BaseQueryStore is intentionally NOT re-exported here.
+ * It pulls @tanstack/query-core, so routing it through this leaf barrel would
+ * make every consumer of the barrel eager-load TanStack. Import it by path.
+ */
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 42fccfb..918a4d5 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,18 +5,13 @@
  */
 
 export {
-    CharacterComparisonEngine,
-    type ComparisonLine,
-    type ComparisonResult,
-    type ControlDataModel,
-    type ControlModel,
     createDebouncedState,
     createEntityStore,
     createFilter,
     createPersistentStore,
     createPerspectiveManager,
     createResponsiveManager,
-    createTypographyControl,
+    createSingleton,
     createVirtualizer,
     type Entity,
     type EntityStore,
@@ -27,10 +22,7 @@ export {
     type Property,
     type ResponsiveManager,
     responsiveManager,
-    TextLayoutEngine,
-    type TextLayoutLine,
-    type TextLayoutResult,
-    type TypographyControl,
+    type Singleton,
     type VirtualItem,
     type Virtualizer,
     type VirtualizerOptions,
diff --git a/src/shared/lib/storybook/index.ts b/src/shared/lib/storybook/index.ts
index dc0137f..08f124c 100644
--- a/src/shared/lib/storybook/index.ts
+++ b/src/shared/lib/storybook/index.ts
@@ -1,9 +1,5 @@
 /**
- * ============================================================================
- * STORYBOOK HELPERS
- * ============================================================================
- *
- * Helper components and utilities for Storybook stories.
+ * Storybook helpers: components and utilities for stories.
  *
  * ## Usage
  *
diff --git a/src/shared/lib/transitions/springySlideFade/springySlideFade.ts b/src/shared/lib/transitions/springySlideFade/springySlideFade.ts
index a32d8a0..a82b7e5 100644
--- a/src/shared/lib/transitions/springySlideFade/springySlideFade.ts
+++ b/src/shared/lib/transitions/springySlideFade/springySlideFade.ts
@@ -3,10 +3,6 @@ import type {
     TransitionConfig,
 } from 'svelte/transition';
 
-function elasticOut(t: number) {
-    return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
-}
-
 function gentleSpring(t: number) {
     return 1 - Math.pow(1 - t, 3) * Math.cos(t * Math.PI * 2);
 }
diff --git a/src/shared/lib/utils/roundToStepPrecision/roundToStepPrecision.ts b/src/shared/lib/utils/roundToStepPrecision/roundToStepPrecision.ts
index f3eb854..7ef6777 100644
--- a/src/shared/lib/utils/roundToStepPrecision/roundToStepPrecision.ts
+++ b/src/shared/lib/utils/roundToStepPrecision/roundToStepPrecision.ts
@@ -1,4 +1,4 @@
-import { getDecimalPlaces } from '$shared/lib/utils';
+import { getDecimalPlaces } from '../getDecimalPlaces/getDecimalPlaces';
 
 /**
  * Rounds a value to match the precision of a given step
diff --git a/src/shared/lib/utils/splitArray/splitArray.ts b/src/shared/lib/utils/splitArray/splitArray.ts
index a3ea60c..bf03a24 100644
--- a/src/shared/lib/utils/splitArray/splitArray.ts
+++ b/src/shared/lib/utils/splitArray/splitArray.ts
@@ -24,9 +24,14 @@
  */
 export function splitArray<T>(array: T[], callback: (item: T) => boolean) {
     return array.reduce<[T[], T[]]>(
-        ([pass, fail], item) => (
-            callback(item) ? pass.push(item) : fail.push(item), [pass, fail]
-        ),
+        ([pass, fail], item) => {
+            if (callback(item)) {
+                pass.push(item);
+            } else {
+                fail.push(item);
+            }
+            return [pass, fail];
+        },
         [[], []],
     );
 }
diff --git a/src/shared/ui/Badge/Badge.svelte b/src/shared/ui/Badge/Badge.svelte
index 9c46dd3..d2738bb 100644
--- a/src/shared/ui/Badge/Badge.svelte
+++ b/src/shared/ui/Badge/Badge.svelte
@@ -4,12 +4,12 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import {
     type LabelSize,
     labelSizeConfig,
-} from '$shared/ui/Label/config';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+} from '../labelConfig';
 
 type BadgeVariant = 'default' | 'accent' | 'success' | 'warning' | 'info';
 
diff --git a/src/shared/ui/ComboControl/ComboControl.stories.svelte b/src/shared/ui/ComboControl/ComboControl.stories.svelte
index bdaf27f..09ef682 100644
--- a/src/shared/ui/ComboControl/ComboControl.stories.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.stories.svelte
@@ -1,7 +1,7 @@
 <script module>
-import { createTypographyControl } from '$shared/lib';
 import { defineMeta } from '@storybook/addon-svelte-csf';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/ComboControl',
@@ -23,7 +23,7 @@ const { Story } = defineMeta({
         },
         control: {
             control: 'object',
-            description: 'TypographyControl instance managing the value and bounds',
+            description: 'NumericControl instance managing the value and bounds',
         },
     },
 });
@@ -31,7 +31,7 @@ const { Story } = defineMeta({
 
 <script lang="ts">
 import type { ComponentProps } from 'svelte';
-const horizontalControl = createTypographyControl({ min: 0, max: 100, step: 1, value: 50 });
+const horizontalControl = createNumericControlMock({ min: 0, max: 100, step: 1, value: 50 });
 </script>
 
 <Story
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 1371c6d..12ae9f8 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -4,22 +4,23 @@
     that opens a vertical slider popover.
 -->
 <script lang="ts">
-import type { TypographyControl } from '$shared/lib';
 import { cn } from '$shared/lib';
-import {
-    Popover,
-    Slider,
-} from '$shared/ui';
-import { Button } from '$shared/ui/Button';
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
+import { Button } from '../Button';
+import Popover from '../Popover/Popover.svelte';
+import Slider from '../Slider/Slider.svelte';
 import TechText from '../TechText/TechText.svelte';
+import type {
+    ControlLabels,
+    NumericControl,
+} from './types';
 
-interface Props {
+interface Props extends ControlLabels {
     /**
-     * Typography control
+     * Bounded numeric control to render
      */
-    control: TypographyControl;
+    control: NumericControl;
     /**
      * Control label
      */
@@ -33,20 +34,6 @@ interface Props {
      * @default false
      */
     reduced?: boolean;
-    /**
-     * Increase button label
-     * @default 'Increase'
-     */
-    increaseLabel?: string;
-    /**
-     * Decrease button label
-     * @default 'Decrease'
-     */
-    decreaseLabel?: string;
-    /**
-     * Control aria label
-     */
-    controlLabel?: string;
 }
 
 let {
@@ -97,9 +84,11 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             {formattedValue()}
         </span>
     </div>
-
-    <!-- ── FULL MODE ──────────────────────────────────────────────────────────────── -->
 {:else}
+    <!--
+        FULL MODE
+        +/- buttons flanking a slider popover.
+    -->
     <div class={cn('flex items-center px-1 relative', className)}>
         <!-- Decrease button -->
         <Button
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte.test.ts b/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
index 61e2e35..79e32e9 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
+++ b/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
@@ -1,4 +1,3 @@
-import { createTypographyControl } from '$shared/lib';
 import {
     fireEvent,
     render,
@@ -7,9 +6,10 @@ import {
     within,
 } from '@testing-library/svelte';
 import ComboControl from './ComboControl.svelte';
+import { createNumericControlMock } from './testing/createNumericControlMock.svelte';
 
 function makeControl(value: number, opts: { min?: number; max?: number; step?: number } = {}) {
-    return createTypographyControl({
+    return createNumericControlMock({
         value,
         min: opts.min ?? 0,
         max: opts.max ?? 100,
diff --git a/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts b/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts
new file mode 100644
index 0000000..537db69
--- /dev/null
+++ b/src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts
@@ -0,0 +1,47 @@
+/**
+ * Test/story mock implementing the NumericControl contract.
+ *
+ * Lives in shared/ui because ComboControl must be testable without importing
+ * the real typography factory (which sits in a feature, above shared).
+ */
+import type { NumericControl } from '../types';
+
+/**
+ * Build a reactive NumericControl mock with clamping and stepping.
+ */
+export function createNumericControlMock(
+    init: Pick<NumericControl, 'value' | 'min' | 'max' | 'step'>,
+): NumericControl {
+    let value = $state(init.value);
+    const clamp = (v: number) => Math.min(Math.max(v, init.min), init.max);
+
+    return {
+        get value() {
+            return value;
+        },
+        set value(v) {
+            value = clamp(v);
+        },
+        get min() {
+            return init.min;
+        },
+        get max() {
+            return init.max;
+        },
+        get step() {
+            return init.step;
+        },
+        get isAtMin() {
+            return value <= init.min;
+        },
+        get isAtMax() {
+            return value >= init.max;
+        },
+        increase() {
+            value = clamp(value + init.step);
+        },
+        decrease() {
+            value = clamp(value - init.step);
+        },
+    };
+}
diff --git a/src/shared/ui/ComboControl/types.ts b/src/shared/ui/ComboControl/types.ts
new file mode 100644
index 0000000..b1c35d7
--- /dev/null
+++ b/src/shared/ui/ComboControl/types.ts
@@ -0,0 +1,60 @@
+/**
+ * Structural contract for the bounded numeric control ComboControl renders.
+ *
+ * ComboControl depends only on this shape — never on a concrete factory.
+ * The typography control factory in features/AdjustTypography produces a value
+ * conforming to it; any other conforming object works equally well.
+ */
+export interface NumericControl {
+    /**
+     * Current value. The setter is expected to clamp to [min, max] and round to step.
+     */
+    value: number;
+    /**
+     * Lower inclusive bound
+     */
+    readonly min: number;
+    /**
+     * Upper inclusive bound
+     */
+    readonly max: number;
+    /**
+     * Increment/decrement precision
+     */
+    readonly step: number;
+    /**
+     * True when the value is at or below min
+     */
+    readonly isAtMin: boolean;
+    /**
+     * True when the value is at or above max
+     */
+    readonly isAtMax: boolean;
+    /**
+     * Increase the value by one step (clamped to max)
+     */
+    increase(): void;
+    /**
+     * Decrease the value by one step (clamped to min)
+     */
+    decrease(): void;
+}
+
+/**
+ * Accessibility label fields. Single source of truth — composed by both
+ * ComboControl.Props and the typography ControlModel so they never drift.
+ */
+export interface ControlLabels {
+    /**
+     * Screen-reader label for the increase button
+     */
+    increaseLabel?: string;
+    /**
+     * Screen-reader label for the decrease button
+     */
+    decreaseLabel?: string;
+    /**
+     * Overall label describing the control's purpose (also the aria fallback)
+     */
+    controlLabel?: string;
+}
diff --git a/src/shared/ui/FilterGroup/FilterGroup.svelte b/src/shared/ui/FilterGroup/FilterGroup.svelte
index acc9a41..eb924bc 100644
--- a/src/shared/ui/FilterGroup/FilterGroup.svelte
+++ b/src/shared/ui/FilterGroup/FilterGroup.svelte
@@ -5,8 +5,6 @@
 <script lang="ts">
 import type { Filter } from '$shared/lib';
 import { cn } from '$shared/lib';
-import { Button } from '$shared/ui';
-import { Label } from '$shared/ui';
 import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
 import { cubicOut } from 'svelte/easing';
@@ -14,6 +12,8 @@ import {
     draw,
     fly,
 } from 'svelte/transition';
+import { Button } from '../Button';
+import Label from '../Label/Label.svelte';
 
 interface Props {
     /**
diff --git a/src/shared/ui/Input/index.ts b/src/shared/ui/Input/index.ts
index db1dab6..e18aa5d 100644
--- a/src/shared/ui/Input/index.ts
+++ b/src/shared/ui/Input/index.ts
@@ -1 +1,2 @@
 export { default as Input } from './Input.svelte';
+export { inputIconSize } from './types';
diff --git a/src/shared/ui/Label/Label.svelte b/src/shared/ui/Label/Label.svelte
index f4388a1..799f0c3 100644
--- a/src/shared/ui/Label/Label.svelte
+++ b/src/shared/ui/Label/Label.svelte
@@ -11,7 +11,7 @@ import {
     type LabelVariant,
     labelSizeConfig,
     labelVariantConfig,
-} from './config';
+} from '../labelConfig';
 
 interface Props {
     /**
diff --git a/src/shared/ui/Logo/Logo.svelte b/src/shared/ui/Logo/Logo.svelte
index 7edb647..208e3d5 100644
--- a/src/shared/ui/Logo/Logo.svelte
+++ b/src/shared/ui/Logo/Logo.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
-import { Badge } from '$shared/ui';
+import Badge from '../Badge/Badge.svelte';
 
 interface Props {
     /**
diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index f9efca8..af8d5de 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -7,8 +7,10 @@
     They cannot pass leftIcon — it's owned by this wrapper.
 -->
 <script lang="ts">
-import { Input } from '$shared/ui/Input';
-import { inputIconSize } from '$shared/ui/Input/types';
+import {
+    Input,
+    inputIconSize,
+} from '$shared/ui/Input';
 import SearchIcon from '@lucide/svelte/icons/search';
 import type { ComponentProps } from 'svelte';
 
diff --git a/src/shared/ui/Section/SectionHeader/SectionHeader.svelte b/src/shared/ui/Section/SectionHeader/SectionHeader.svelte
index c7e285d..0617338 100644
--- a/src/shared/ui/Section/SectionHeader/SectionHeader.svelte
+++ b/src/shared/ui/Section/SectionHeader/SectionHeader.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
-import { Label } from '$shared/ui';
+import Label from '../../Label/Label.svelte';
 
 interface Props {
     /**
diff --git a/src/shared/ui/SidebarContainer/SidebarContainer.svelte b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
index 57108c9..a688846 100644
--- a/src/shared/ui/SidebarContainer/SidebarContainer.svelte
+++ b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
@@ -43,7 +43,7 @@ function close() {
 
 {#if responsive.isMobile}
     <!--
-        ── MOBILE: fixed overlay ─────────────────────────────────────────────
+        MOBILE: fixed overlay.
         Only rendered when open. Both backdrop and panel use Svelte transitions
         so they animate in and out independently.
     -->
@@ -70,7 +70,7 @@ function close() {
     {/if}
 {:else}
     <!--
-        ── DESKTOP: collapsible column ───────────────────────────────────────
+        DESKTOP: collapsible column.
         Always in the DOM — width transitions between 320px and 0.
         overflow-hidden clips the w-80 inner div during the collapse.
 
diff --git a/src/shared/ui/Stat/Stat.svelte b/src/shared/ui/Stat/Stat.svelte
index a4bbc2e..9866d9c 100644
--- a/src/shared/ui/Stat/Stat.svelte
+++ b/src/shared/ui/Stat/Stat.svelte
@@ -4,8 +4,8 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
-import { Label } from '$shared/ui';
 import type { ComponentProps } from 'svelte';
+import Label from '../Label/Label.svelte';
 
 interface Props extends Pick<ComponentProps<typeof Label>, 'variant'> {
     /**
diff --git a/src/shared/ui/Stat/StatGroup.svelte b/src/shared/ui/Stat/StatGroup.svelte
index f80c91d..cdb8bdb 100644
--- a/src/shared/ui/Stat/StatGroup.svelte
+++ b/src/shared/ui/Stat/StatGroup.svelte
@@ -4,8 +4,8 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
-import { Stat } from '$shared/ui';
 import type { ComponentProps } from 'svelte';
+import Stat from './Stat.svelte';
 
 interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
     label: string;
diff --git a/src/shared/ui/TechText/TechText.svelte b/src/shared/ui/TechText/TechText.svelte
index de5b011..c273227 100644
--- a/src/shared/ui/TechText/TechText.svelte
+++ b/src/shared/ui/TechText/TechText.svelte
@@ -4,13 +4,13 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
+import type { Snippet } from 'svelte';
 import {
     type LabelSize,
     type LabelVariant,
     labelSizeConfig,
     labelVariantConfig,
-} from '$shared/ui/Label/config';
-import type { Snippet } from 'svelte';
+} from '../labelConfig';
 
 interface Props {
     /**
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 8400a36..8cc4073 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -28,6 +28,16 @@ export {
      */
     default as ComboControl,
 } from './ComboControl/ComboControl.svelte';
+export type {
+    /**
+     * Accessibility label fields shared by ComboControl and control models
+     */
+    ControlLabels,
+    /**
+     * Structural contract for the bounded numeric control ComboControl renders
+     */
+    NumericControl,
+} from './ComboControl/types';
 export {
     /**
      * Rich text input using contenteditable attribute
diff --git a/src/shared/ui/Label/config.ts b/src/shared/ui/labelConfig.ts
similarity index 100%
rename from src/shared/ui/Label/config.ts
rename to src/shared/ui/labelConfig.ts
diff --git a/src/widgets/ComparisonView/index.ts b/src/widgets/ComparisonView/index.ts
index cc3b298..38fd312 100644
--- a/src/widgets/ComparisonView/index.ts
+++ b/src/widgets/ComparisonView/index.ts
@@ -1,2 +1,3 @@
-export * from './model';
+export { getComparisonStore } from './model';
+export type { Side } from './model';
 export { ComparisonView } from './ui';
diff --git a/src/widgets/ComparisonView/lib/index.ts b/src/widgets/ComparisonView/lib/index.ts
index d4cccf6..f84d781 100644
--- a/src/widgets/ComparisonView/lib/index.ts
+++ b/src/widgets/ComparisonView/lib/index.ts
@@ -1,3 +1,7 @@
-export * from './utils/dotTransition';
-export * from './utils/ensureCanvasFonts/ensureCanvasFonts';
-export * from './utils/getPretextFontString/getPretextFontString';
+export {
+    createDotCrossfade,
+    getDotTransitionParams,
+} from './utils/dotTransition';
+export type { DotTransitionParams } from './utils/dotTransition';
+export { ensureCanvasFonts } from './utils/ensureCanvasFonts/ensureCanvasFonts';
+export { getPretextFontString } from './utils/getPretextFontString/getPretextFontString';
diff --git a/src/widgets/ComparisonView/lib/utils/dotTransition.ts b/src/widgets/ComparisonView/lib/utils/dotTransition.ts
index 78fb4c3..28ac585 100644
--- a/src/widgets/ComparisonView/lib/utils/dotTransition.ts
+++ b/src/widgets/ComparisonView/lib/utils/dotTransition.ts
@@ -1,4 +1,3 @@
-import { VIRTUAL_INDEX_NOT_LOADED } from '$entities/Font';
 import { cubicOut } from 'svelte/easing';
 import {
     type CrossfadeParams,
diff --git a/src/widgets/ComparisonView/model/index.ts b/src/widgets/ComparisonView/model/index.ts
index 6cba7a6..11d6d59 100644
--- a/src/widgets/ComparisonView/model/index.ts
+++ b/src/widgets/ComparisonView/model/index.ts
@@ -1,4 +1,3 @@
-export {
-    comparisonStore,
-    type Side,
-} from './stores/comparisonStore.svelte';
+export { getComparisonStore } from './stores/comparisonStore.svelte';
+
+export type { Side } from './stores/comparisonStore.svelte';
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index f43cce4..04967ad 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -14,15 +14,23 @@
  */
 
 import {
+    type FontCatalogStore,
+    type FontLifecycleManager,
     type FontLoadRequestConfig,
+    FontsByIdsStore,
     type UnifiedFont,
-    fontCatalogStore,
-    fontLifecycleManager,
+    getFontCatalog,
+    getFontLifecycleManager,
     getFontUrl,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
-import { FontsByIdsStore } from '$features/FetchFontsByIds';
-import { createPersistentStore } from '$shared/lib';
+import {
+    type TypographySettingsStore,
+    getTypographySettingsStore,
+} from '$features/AdjustTypography';
+import {
+    createPersistentStore,
+    createSingleton,
+} from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
 
@@ -51,12 +59,6 @@ const STORAGE_KEY = 'glyphdiff:comparison';
  */
 const FONT_READY_FALLBACK_MS = 1000;
 
-// Persistent storage for selected comparison fonts
-const storage = createPersistentStore<ComparisonState>(STORAGE_KEY, {
-    fontAId: null,
-    fontBId: null,
-});
-
 /**
  * Store for managing font comparison state.
  *
@@ -95,13 +97,39 @@ export class ComparisonStore {
      * TanStack Query-backed store for efficient batch font retrieval
      */
     #fontsByIdsStore: FontsByIdsStore;
+    /**
+     * Paginated font catalog — source of fonts for default seeding.
+     */
+    #fontCatalog: FontCatalogStore;
+    /**
+     * Typography settings applied to the rendered comparison.
+     */
+    #typography: TypographySettingsStore;
+    /**
+     * Font load/cache/eviction manager; pinned to keep compared fonts resident.
+     */
+    #lifecycle: FontLifecycleManager;
+    /**
+     * Per-instance persistent storage for the selected comparison fonts.
+     */
+    #storage = createPersistentStore<ComparisonState>(STORAGE_KEY, {
+        fontAId: null,
+        fontBId: null,
+    });
+    /**
+     * Disposes the constructor's $effect.root. Must be run on teardown.
+     */
+    #disposeEffects: () => void;
 
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
-        const { fontAId, fontBId } = storage.value;
+        const { fontAId, fontBId } = this.#storage.value;
         this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
+        this.#fontCatalog = getFontCatalog();
+        this.#typography = getTypographySettingsStore();
+        this.#lifecycle = getFontLifecycleManager();
 
-        $effect.root(() => {
+        this.#disposeEffects = $effect.root(() => {
             // Sync batch results → fontA / fontB
             $effect(() => {
                 const fonts = this.#fontsByIdsStore.fonts;
@@ -109,7 +137,7 @@ export class ComparisonStore {
                     return;
                 }
 
-                const { fontAId: aId, fontBId: bId } = storage.value;
+                const { fontAId: aId, fontBId: bId } = this.#storage.value;
                 if (aId) {
                     const fa = fonts.find(f => f.id === aId);
                     if (fa) {
@@ -128,7 +156,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const weight = typographySettingsStore.weight;
+                const weight = this.#typography.weight;
 
                 if (!fa || !fb) {
                     return;
@@ -149,7 +177,7 @@ export class ComparisonStore {
                 });
 
                 if (configs.length > 0) {
-                    fontLifecycleManager.touch(configs);
+                    this.#lifecycle.touch(configs);
                     this.#checkFontsLoaded();
                 }
             });
@@ -164,14 +192,14 @@ export class ComparisonStore {
                 // Untracked: only the catalog load should drive this effect, not the
                 // user's storage writes that happen as a result of normal selection.
                 const hasStoredSelection = untrack(() => {
-                    return storage.value.fontAId !== null || storage.value.fontBId !== null;
+                    return this.#storage.value.fontAId !== null || this.#storage.value.fontBId !== null;
                 });
 
                 if (hasStoredSelection) {
                     return;
                 }
 
-                const fonts = fontCatalogStore.fonts;
+                const fonts = this.#fontCatalog.fonts;
 
                 if (fonts.length < 2) {
                     return;
@@ -180,7 +208,7 @@ export class ComparisonStore {
                 untrack(() => {
                     const id1 = fonts[0].id;
                     const id2 = fonts[fonts.length - 1].id;
-                    storage.value = { fontAId: id1, fontBId: id2 };
+                    this.#storage.value = { fontAId: id1, fontBId: id2 };
                     this.#fontsByIdsStore.setIds([id1, id2]);
                 });
             });
@@ -189,19 +217,19 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const w = typographySettingsStore.weight;
+                const w = this.#typography.weight;
                 if (fa) {
-                    fontLifecycleManager.pin(fa.id, w, fa.features?.isVariable);
+                    this.#lifecycle.pin(fa.id, w, fa.features?.isVariable);
                 }
                 if (fb) {
-                    fontLifecycleManager.pin(fb.id, w, fb.features?.isVariable);
+                    this.#lifecycle.pin(fb.id, w, fb.features?.isVariable);
                 }
                 return () => {
                     if (fa) {
-                        fontLifecycleManager.unpin(fa.id, w, fa.features?.isVariable);
+                        this.#lifecycle.unpin(fa.id, w, fa.features?.isVariable);
                     }
                     if (fb) {
-                        fontLifecycleManager.unpin(fb.id, w, fb.features?.isVariable);
+                        this.#lifecycle.unpin(fb.id, w, fb.features?.isVariable);
                     }
                 };
             });
@@ -220,8 +248,8 @@ export class ComparisonStore {
             return;
         }
 
-        const weight = typographySettingsStore.weight;
-        const size = typographySettingsStore.renderedSize;
+        const weight = this.#typography.weight;
+        const size = this.#typography.renderedSize;
         const fontAName = this.#fontA?.name;
         const fontBName = this.#fontB?.name;
 
@@ -265,7 +293,7 @@ export class ComparisonStore {
      * Updates persistent storage with the current font selection.
      */
     private updateStorage() {
-        storage.value = {
+        this.#storage.value = {
             fontAId: this.#fontA?.id ?? null,
             fontBId: this.#fontB?.id ?? null,
         };
@@ -349,12 +377,28 @@ export class ComparisonStore {
         this.#fontA = undefined;
         this.#fontB = undefined;
         this.#fontsByIdsStore.setIds([]);
-        storage.clear();
-        typographySettingsStore.reset();
+        this.#storage.clear();
+        this.#typography.reset();
+    }
+
+    /**
+     * Disposes reactive effects and the persistent store. Call on teardown.
+     */
+    destroy() {
+        this.#disposeEffects();
+        this.#storage.destroy();
     }
 }
 
-/**
- * Singleton comparison store instance
- */
-export const comparisonStore = new ComparisonStore();
+const comparisonStore = createSingleton(
+    () => new ComparisonStore(),
+    instance => {
+        instance.resetAll();
+        instance.destroy();
+    },
+);
+
+export const getComparisonStore = comparisonStore.get;
+
+// test-only reset, so specs don't share a live observer or persisted state
+export const __resetComparisonStore = comparisonStore.reset;
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 9227469..1132c65 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -10,8 +10,10 @@
  */
 
 import type { UnifiedFont } from '$entities/Font';
-import { UNIFIED_FONTS } from '$entities/Font/lib/mocks';
-import { queryClient } from '$shared/api/queryClient';
+import { UNIFIED_FONTS } from '$entities/Font/testing';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import {
     beforeEach,
     describe,
@@ -44,9 +46,15 @@ const mockStorage = vi.hoisted(() => {
         configurable: true,
     });
 
+    storage.destroy = vi.fn();
+
     return storage;
 });
 
+// Writable catalog stub — tests assign `.fonts` directly, which the real
+// FontCatalogStore forbids (getter-only). getFontCatalog returns this singleton.
+const mockFontCatalog = vi.hoisted(() => ({ fonts: [] as unknown[] }));
+
 vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte', () => ({
     createPersistentStore: vi.fn(() => mockStorage),
 }));
@@ -55,18 +63,35 @@ vi.mock('$entities/Font', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font')>();
     return {
         ...actual,
-        fontCatalogStore: { fonts: [] },
-        fontLifecycleManager: {
-            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'),
     };
 });
 
+const mockLifecycle = vi.hoisted(() => ({
+    touch: vi.fn(),
+    pin: vi.fn(),
+    unpin: vi.fn(),
+    getFontStatus: vi.fn(),
+    ready: vi.fn(() => Promise.resolve()),
+}));
+
+// Stores moved behind the model segment; mock them there. FontsByIdsStore is
+// intentionally left real (spread from actual) so $state reactivity works.
+vi.mock('$entities/Font/model', async importOriginal => {
+    const actual = await importOriginal<typeof import('$entities/Font/model')>();
+    return {
+        ...actual,
+        getFontCatalog: () => mockFontCatalog,
+        getFontLifecycleManager: () => mockLifecycle,
+    };
+});
+
+const mockTypography = vi.hoisted(() => ({
+    weight: 400,
+    renderedSize: 48,
+    reset: vi.fn(),
+}));
+
 vi.mock('$features/AdjustTypography', () => ({
     DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [],
     createTypographyControlManager: vi.fn(() => ({
@@ -74,33 +99,25 @@ vi.mock('$features/AdjustTypography', () => ({
         renderedSize: 48,
         reset: vi.fn(),
     })),
+    getTypographySettingsStore: () => mockTypography,
 }));
 
-vi.mock('$features/AdjustTypography/model', () => ({
-    typographySettingsStore: {
-        weight: 400,
-        renderedSize: 48,
-        reset: vi.fn(),
-    },
-}));
-
-import {
-    fontCatalogStore,
-    fontLifecycleManager,
-} from '$entities/Font';
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
+import { getFontCatalog } from '$entities/Font/model';
+import { __resetFontCatalog } from '$entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte';
 import { ComparisonStore } from './comparisonStore.svelte';
 
 describe('ComparisonStore', () => {
     const mockFontA: UnifiedFont = UNIFIED_FONTS.roboto; // id: 'roboto'
     const mockFontB: UnifiedFont = UNIFIED_FONTS.openSans; // id: 'open-sans'
+    let fontCatalog = getFontCatalog();
 
     beforeEach(() => {
         queryClient.clear();
         vi.clearAllMocks();
         mockStorage._value = { fontAId: null, fontBId: null };
         mockStorage._clear.mockClear();
-        (fontCatalogStore as any).fonts = [];
+        (fontCatalog as any).fonts = [];
 
         // Default: fetchFontsByIds returns empty so tests that don't care don't hang
         vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([]);
@@ -117,6 +134,10 @@ describe('ComparisonStore', () => {
         });
     });
 
+    afterEach(() => {
+        __resetFontCatalog();
+    });
+
     describe('Initialization', () => {
         it('should create store with initial empty state', () => {
             const store = new ComparisonStore();
@@ -155,7 +176,7 @@ describe('ComparisonStore', () => {
 
     describe('Default Fallbacks', () => {
         it('should update storage with default IDs when storage is empty', async () => {
-            (fontCatalogStore as any).fonts = [mockFontA, mockFontB];
+            (fontCatalog as any).fonts = [mockFontA, mockFontB];
             vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
 
             new ComparisonStore();
@@ -183,7 +204,7 @@ describe('ComparisonStore', () => {
 
             // Catalog defaults differ from the stored selection — if the
             // effect mis-seeds, storage will flip to roboto / open-sans.
-            (fontCatalogStore as any).fonts = [mockFontA, mockFontB];
+            (fontCatalog as any).fonts = [mockFontA, mockFontB];
 
             // Delay the batch so the catalog-driven effect runs first.
             vi.spyOn(proxyFonts, 'fetchFontsByIds').mockImplementation(
@@ -252,12 +273,12 @@ describe('ComparisonStore', () => {
             new ComparisonStore();
 
             await vi.waitFor(() => {
-                expect(fontLifecycleManager.pin).toHaveBeenCalledWith(
+                expect(mockLifecycle.pin).toHaveBeenCalledWith(
                     mockFontA.id,
                     400,
                     mockFontA.features?.isVariable,
                 );
-                expect(fontLifecycleManager.pin).toHaveBeenCalledWith(
+                expect(mockLifecycle.pin).toHaveBeenCalledWith(
                     mockFontB.id,
                     400,
                     mockFontB.features?.isVariable,
@@ -278,12 +299,12 @@ describe('ComparisonStore', () => {
             store.fontA = mockFontC;
 
             await vi.waitFor(() => {
-                expect(fontLifecycleManager.unpin).toHaveBeenCalledWith(
+                expect(mockLifecycle.unpin).toHaveBeenCalledWith(
                     mockFontA.id,
                     400,
                     mockFontA.features?.isVariable,
                 );
-                expect(fontLifecycleManager.pin).toHaveBeenCalledWith(
+                expect(mockLifecycle.pin).toHaveBeenCalledWith(
                     mockFontC.id,
                     400,
                     mockFontC.features?.isVariable,
diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index 7261b16..ddb69a8 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -1,37 +1,45 @@
 <!--
     Component: Character
-    Renders a single character with morphing animation
+    Renders a single character with morphing animation.
+
+    Sits inline on the parent line's baseline (`vertical-align: baseline`) so it
+    aligns with the bulk text runs in Line.svelte. Sets its own font size since
+    the Line container zeroes font-size to collapse inter-element whitespace.
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/AdjustTypography';
+import type { UnifiedFont } from '$entities/Font';
 import { cn } from '$shared/lib';
-import { comparisonStore } from '../../model';
 
 interface Props {
     /**
-     * Character
+     * The single character to render.
      */
     char: string;
     /**
-     * Proximity value
+     * Font shown when `isPast` is true (the "before" side of the comparison).
      */
-    proximity: number;
+    fontA: UnifiedFont;
     /**
-     * Past state
+     * Font shown when `isPast` is false (the "after" side of the comparison).
+     */
+    fontB: UnifiedFont;
+    /**
+     * Selects which font this character morphs toward — `fontA` when true,
+     * `fontB` when false — and applies the muted "past" color.
      */
     isPast: boolean;
+    /**
+     * Font size in px. Set explicitly because the Line container uses
+     * `font-size: 0` to collapse inter-element whitespace.
+     */
+    fontSize: number;
 }
 
-let { char, proximity, isPast }: Props = $props();
-
-const fontA = $derived(comparisonStore.fontA);
-const fontB = $derived(comparisonStore.fontB);
-const typography = $derived(typographySettingsStore);
+let { char, fontA, fontB, isPast, fontSize }: Props = $props();
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? '\u00A0' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -45,12 +53,7 @@ $effect(() => {
 </script>
 
 {#if fontA && fontB}
-    <span
-        class="char-wrap"
-        style:font-size="{typography.renderedSize}px"
-        style:margin-right="{typography.spacing}em"
-        style:will-change={proximity > 0 ? 'transform' : 'auto'}
-    >
+    <span class="char-wrap" style:font-size="{fontSize}px">
         {#each [0, 1] as s (s)}
             <span
                 class={cn(
@@ -61,12 +64,11 @@ $effect(() => {
                         : 'text-neutral-950 dark:text-white',
                 )}
                 style:font-family={slotFonts[s]}
-                style:font-weight={typography.weight}
                 style:opacity={slot === s ? '1' : '0'}
                 style:position={slot === s ? 'relative' : 'absolute'}
                 aria-hidden={slot !== s ? true : undefined}
             >
-                {displayChar}
+                {char}
             </span>
         {/each}
     </span>
@@ -74,9 +76,10 @@ $effect(() => {
 
 <style>
 .char-wrap {
-    display: inline-block;
+    display: inline-flex;
     position: relative;
     line-height: 1;
+    vertical-align: baseline;
 }
 
 .char-inner {
@@ -89,7 +92,6 @@ $effect(() => {
     font-optical-sizing: auto;
     transition:
         opacity 0.1s ease-out,
-        color 0.2s ease-out,
-        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        color 0.2s ease-out;
 }
 </style>
diff --git a/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte b/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
index 7e27cf3..8781043 100644
--- a/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
+++ b/src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
@@ -4,7 +4,7 @@
     Owns all shared state and wires the pieces together.
 -->
 <script lang="ts">
-import { NavigationWrapper } from '$entities/Breadcrumb';
+import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { SidebarContainer } from '$shared/ui';
 import {
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 4659390..396b31f 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -9,8 +9,8 @@ import {
     FontVirtualList,
     type UnifiedFont,
     VIRTUAL_INDEX_NOT_LOADED,
-    fontCatalogStore,
-    fontLifecycleManager,
+    getFontCatalog,
+    getFontLifecycleManager,
 } from '$entities/Font';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
@@ -26,17 +26,22 @@ import {
 } from '../../lib';
 import {
     type Side,
-    comparisonStore,
+    getComparisonStore,
 } from '../../model';
 
-const side = $derived(comparisonStore.side);
+const fontCatalog = getFontCatalog();
+const comparisonStore = getComparisonStore();
+const fontLifecycleManager = getFontLifecycleManager();
+
+const fonts = $derived<UnifiedFont[]>(fontCatalog.fonts);
+const side = $derived<Side>(comparisonStore.side);
 
 // Treat -1 (not loaded) as being at the very bottom of the infinite list
 function getVirtualIndex(fontId: string | undefined): number {
     if (!fontId) {
         return -1;
     }
-    const idx = fontCatalogStore.fonts.findIndex(f => f.id === fontId);
+    const idx = fonts.findIndex(f => f.id === fontId);
     if (idx === -1) {
         return VIRTUAL_INDEX_NOT_LOADED;
     }
@@ -73,21 +78,6 @@ function handleSelect(font: UnifiedFont) {
         comparisonStore.fontB = font;
     }
 }
-
-/**
- * Returns true once the font file is loaded (or errored) and safe to render.
- * Called inside the template — Svelte 5 tracks the $state reads inside
- * fontLifecycleManager.getFontStatus(), so each row re-renders reactively
- * when its file arrives.
- */
-function isFontReady(font: UnifiedFont): boolean {
-    const status = fontLifecycleManager.getFontStatus(
-        font.id,
-        DEFAULT_FONT_WEIGHT,
-        font.features?.isVariable,
-    );
-    return status === 'loaded' || status === 'error';
-}
 </script>
 
 <div class="flex-1 min-h-0 h-full">
@@ -127,8 +117,15 @@ function isFontReady(font: UnifiedFont): boolean {
             {/snippet}
 
             {#snippet children({ item: font, index })}
+                <!--
+                    Read load status once per row. Svelte 5 tracks the $state reads inside
+                    fontLifecycleManager.getFontStatus(), so the row re-renders reactively
+                    when its file arrives — and the same value drives both the skeleton gate
+                    and FontApplicator below.
+                -->
+                {@const status = fontLifecycleManager.getFontStatus(font.id, DEFAULT_FONT_WEIGHT, font.features?.isVariable)}
                 <div class="relative h-11 w-full">
-                    {#if !isFontReady(font)}
+                    {#if status !== 'loaded' && status !== 'error'}
                         <div
                             class="absolute inset-0 px-3 md:px-4 flex items-center justify-between border border-transparent"
                             transition:fade={{ duration: 300 }}
@@ -153,7 +150,7 @@ function isFontReady(font: UnifiedFont): boolean {
                                 class="h-full"
                                 iconPosition="right"
                             >
-                                <FontApplicator {font}>
+                                <FontApplicator {font} {status}>
                                     {font.name}
                                 </FontApplicator>
 
diff --git a/src/widgets/ComparisonView/ui/Header/Header.svelte b/src/widgets/ComparisonView/ui/Header/Header.svelte
index 88d515f..df41324 100644
--- a/src/widgets/ComparisonView/ui/Header/Header.svelte
+++ b/src/widgets/ComparisonView/ui/Header/Header.svelte
@@ -17,7 +17,7 @@ import {
 import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
 import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
 import { getContext } from 'svelte';
-import { comparisonStore } from '../../model';
+import { getComparisonStore } from '../../model';
 
 interface Props {
     /**
@@ -40,6 +40,8 @@ let {
     class: className,
 }: Props = $props();
 
+const comparisonStore = getComparisonStore();
+
 const responsive = getContext<ResponsiveManager>('responsive');
 
 const position = $derived(comparisonStore.sliderPosition.toFixed(0));
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index d8cb81f..96e8b6d 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -1,42 +1,105 @@
 <!--
     Component: Line
-    Renders a line of text in the SliderArea
+    Renders one laid-out line as three regions: a fontA bulk run (past the
+    slider), an N-char crossfade window straddling it, and a fontB bulk run (not
+    yet past). Bulk runs are native shaped text (kerning, ligatures); only the
+    window uses per-char DOM. `split` is a primitive so the render-model
+    `$derived` skips recomputation on ticks that leave it unchanged.
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/AdjustTypography';
-import type { Snippet } from 'svelte';
-
-interface LineChar {
-    char: string;
-    xA: number;
-    widthA: number;
-    xB: number;
-    widthB: number;
-}
+import {
+    type ComparisonLine,
+    computeLineRenderModel,
+} from '$entities/Font';
+import { getTypographySettingsStore } from '$features/AdjustTypography';
+import { getComparisonStore } from '../../model';
+import Character from '../Character/Character.svelte';
 
 interface Props {
     /**
-     * Pre-computed grapheme array from CharacterComparisonEngine.
-     * Using the engine's chars array (rather than splitting line.text) ensures
-     * correct grapheme-cluster boundaries for emoji and multi-codepoint characters.
+     * Laid-out line from `DualFontLayout.layout()`. Stable across slider movement.
      */
-    chars: LineChar[];
+    line: ComparisonLine;
     /**
-     * Character render snippet
+     * Count of chars the slider has passed, from `findSplitIndex`.
      */
-    character: Snippet<[{ char: string; index: number }]>;
+    split: number;
+    /**
+     * Number of chars in the crossfade window around the split.
+     */
+    windowSize: number;
 }
-const typography = $derived(typographySettingsStore);
 
-let { chars, character }: Props = $props();
+let { line, split, windowSize }: Props = $props();
+
+const comparisonStore = getComparisonStore();
+
+const model = $derived(computeLineRenderModel(line, split, windowSize));
+
+const typography = getTypographySettingsStore();
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
+
+const fontSizePx = $derived(typography.renderedSize);
+const lineHeightPx = $derived(typography.height * typography.renderedSize);
+const letterSpacingPx = $derived(typography.spacing * typography.renderedSize);
+
+/**
+ * Class and style are single short bindings so the formatter keeps
+ * `<span ...>{text}</span>` on one line. A wrapped text expression would leak
+ * its indentation into the span content under `white-space: pre`.
+ */
+const BULK_LEFT_CLASS =
+    'inline-block align-baseline leading-none text-swiss-black/75 dark:text-brand/75 transition-colors duration-300';
+const BULK_RIGHT_CLASS =
+    'inline-block align-baseline leading-none text-neutral-950 dark:text-white transition-colors duration-300';
+
+const leftStyle = $derived(`font-family:${fontA?.name ?? ''};font-size:${fontSizePx}px`);
+const rightStyle = $derived(`font-family:${fontB?.name ?? ''};font-size:${fontSizePx}px`);
+
+/**
+ * Stops the whole line from jumping up or down as the slider moves. The browser
+ * pins a line box's baseline to its tallest inline box, so without a fixed
+ * reference the baseline (and every glyph) shifts the moment a bulk run appears
+ * or disappears, or the last window char morphs to a font with a taller ascent.
+ * This invisible strut is always the tallest box — `overflow: hidden` puts its
+ * baseline at its bottom edge — so it owns the line baseline and holds it still.
+ * Its height also sets the text's vertical position (the container is block, so
+ * nothing else centers it).
+ *
+ * Height factors are empirical: the first term centers the text, the `* 1.1`
+ * floor keeps the strut above the fonts' ascent at tight line-heights.
+ */
+const strutHeightPx = $derived(Math.max(lineHeightPx / 2 + fontSizePx * 0.34, fontSizePx * 1.1));
+const strutStyle = $derived(
+    `display:inline-block;width:0;overflow:hidden;vertical-align:baseline;height:${strutHeightPx}px`,
+);
 </script>
 
-<div
-    class="relative flex w-full justify-center items-center whitespace-nowrap"
-    style:height="{typography.height * typography.renderedSize}px"
-    style:line-height="{typography.height * typography.renderedSize}px"
->
-    {#each chars as c, index}
-        {@render character?.({ char: c.char, index })}
-    {/each}
-</div>
+<!--
+    Children align on the baseline (`align-baseline`) so fontA/fontB share it
+    despite differing metrics. `font-size: 0` drops inter-element whitespace that
+    would show as gaps under `white-space: pre`; children restore their size.
+    Letter-spacing is px because em would resolve against that zero.
+-->
+{#if fontA && fontB}
+    <div
+        class="relative block w-full text-center whitespace-pre"
+        style:height="{lineHeightPx}px"
+        style:line-height="{lineHeightPx}px"
+        style:font-size="0"
+        style:letter-spacing="{letterSpacingPx}px"
+        style:font-weight={typography.weight}
+    >
+        <span style={strutStyle} aria-hidden="true"></span>
+        {#if model.leftText}
+            <span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
+        {/if}
+        {#each model.windowChars as wc (wc.key)}
+            <Character char={wc.char} {fontA} {fontB} isPast={wc.isPast} fontSize={fontSizePx} />
+        {/each}
+        {#if model.rightText}
+            <span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
+        {/if}
+    </div>
+{/if}
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index f281cb6..45ef94d 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -5,8 +5,10 @@
     propagates the value into fontCatalogStore.
 -->
 <script lang="ts">
-import { appliedFilterStore } from '$features/FilterAndSortFonts';
+import { getAppliedFilterStore } from '$features/FilterAndSortFonts';
 import { SearchBar } from '$shared/ui';
+
+const appliedFilterStore = getAppliedFilterStore();
 </script>
 
 <div class="p-6 border-b border-subtle">
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts b/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts
index 1bd7575..a1ccaf2 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts
@@ -1,4 +1,4 @@
-import { appliedFilterStore } from '$features/FilterAndSortFonts';
+import { getAppliedFilterStore } from '$features/FilterAndSortFonts';
 import {
     render,
     screen,
@@ -7,7 +7,7 @@ import Search from './Search.svelte';
 
 describe('Search', () => {
     beforeEach(() => {
-        appliedFilterStore.queryValue = '';
+        getAppliedFilterStore().queryValue = '';
     });
 
     describe('Rendering', () => {
@@ -24,7 +24,7 @@ describe('Search', () => {
 
     describe('Value binding', () => {
         it('reflects appliedFilterStore.queryValue as initial value', () => {
-            appliedFilterStore.queryValue = 'Inter';
+            getAppliedFilterStore().queryValue = 'Inter';
             render(Search);
             expect(screen.getByRole('textbox')).toHaveValue('Inter');
         });
diff --git a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index 895b4d5..bb270bc 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
@@ -14,7 +14,7 @@ import {
 import type { Snippet } from 'svelte';
 import {
     type Side,
-    comparisonStore,
+    getComparisonStore,
 } from '../../model';
 
 interface Props {
@@ -37,6 +37,9 @@ let {
     controls,
     class: className,
 }: Props = $props();
+
+const comparisonStore = getComparisonStore();
+const side = $derived<Side>(comparisonStore.side);
 </script>
 
 <div
@@ -49,7 +52,6 @@ let {
         className,
     )}
 >
-    <!-- ── Header: title + A/B toggle ────────────────────────────────── -->
     <div
         class="
             p-6 shrink-0
@@ -71,9 +73,9 @@ let {
         <ButtonGroup>
             <ToggleButton
                 size="sm"
-                active={comparisonStore.side === 'A'}
+                active={side === 'A'}
                 aria-controls="primary-font"
-                aria-pressed={comparisonStore.side === 'A'}
+                aria-pressed={side === 'A'}
                 onclick={() => comparisonStore.side = 'A'}
                 class="flex-1 tracking-wide font-bold uppercase"
             >
@@ -83,9 +85,9 @@ let {
             <ToggleButton
                 size="sm"
                 class="flex-1 tracking-wide font-bold uppercase"
-                active={comparisonStore.side === 'B'}
+                active={side === 'B'}
                 aria-controls="secondary-font"
-                aria-pressed={comparisonStore.side === 'B'}
+                aria-pressed={side === 'B'}
                 onclick={() => comparisonStore.side = 'B'}
             >
                 <span>Right Font</span>
@@ -93,14 +95,13 @@ let {
         </ButtonGroup>
     </div>
 
-    <!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
+    <!-- No scroll here; VirtualList handles scrolling -->
     <div class="flex-1 min-h-0 surface-canvas">
         {#if main}
             {@render main()}
         {/if}
     </div>
 
-    <!-- ── Bottom: fixed controls ─────────────────────────────────────── -->
     {#if controls}
         <div
             class="
diff --git a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte.test.ts b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte.test.ts
index 14b24ce..998d77c 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte.test.ts
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte.test.ts
@@ -5,7 +5,11 @@ import {
     waitFor,
 } from '@testing-library/svelte';
 import { createRawSnippet } from 'svelte';
-import { comparisonStore } from '../../model';
+import { getComparisonStore } from '../../model';
+import {
+    ComparisonStore,
+    __resetComparisonStore,
+} from '../../model/stores/comparisonStore.svelte';
 import Sidebar from './Sidebar.svelte';
 
 function textSnippet(text: string) {
@@ -13,10 +17,17 @@ function textSnippet(text: string) {
 }
 
 describe('Sidebar', () => {
-    afterEach(() => {
+    let comparisonStore!: ComparisonStore;
+
+    beforeEach(() => {
+        comparisonStore = getComparisonStore();
         comparisonStore.side = 'A';
     });
 
+    afterEach(() => {
+        __resetComparisonStore();
+    });
+
     describe('Rendering', () => {
         it('renders the "Configuration" title', () => {
             render(Sidebar);
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index a5ae2de..8b98abe 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -8,21 +8,23 @@
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
 -->
 <script lang="ts">
+import {
+    type ComparisonResult,
+    DualFontLayout,
+    findSplitIndex,
+} from '$entities/Font';
 import {
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
-} from '$entities/Font';
-import { TypographyMenu } from '$features/AdjustTypography';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
+    TypographyMenu,
+    getTypographySettingsStore,
+} from '$features/AdjustTypography';
 import {
     type ResponsiveManager,
     debounce,
 } from '$shared/lib';
 import { cn } from '$shared/lib';
-import {
-    CharacterComparisonEngine,
-} from '$shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte';
 import { Loader } from '$shared/ui';
 import { getContext } from 'svelte';
 import { Spring } from 'svelte/motion';
@@ -31,8 +33,7 @@ import {
     ensureCanvasFonts,
     getPretextFontString,
 } from '../../lib';
-import { comparisonStore } from '../../model';
-import Character from '../Character/Character.svelte';
+import { getComparisonStore } from '../../model';
 import Line from '../Line/Line.svelte';
 import Thumb from '../Thumb/Thumb.svelte';
 
@@ -50,6 +51,8 @@ interface Props {
 
 let { isSidebarOpen = false, class: className }: Props = $props();
 
+const comparisonStore = getComparisonStore();
+
 /**
  * Spring tuning for the comparison slider thumb. Lower stiffness = slower
  * follow; higher damping = less overshoot.
@@ -62,14 +65,6 @@ const SLIDER_SPRING_CONFIG = { stiffness: 0.2, damping: 0.7 } as const;
  */
 const SLIDER_PERSIST_DEBOUNCE_MS = 100;
 
-/**
- * Horizontal layout padding subtracted from container width before laying
- * out the comparison text. Different per breakpoint to match the gutters
- * around the slider track.
- */
-const SLIDER_PADDING_MOBILE_PX = 48;
-const SLIDER_PADDING_DESKTOP_PX = 96;
-
 /**
  * Position bounds (percent of container width).
  */
@@ -86,7 +81,7 @@ const SLIDER_STEP_COARSE = 10;
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
-const typography = $derived(typographySettingsStore);
+const typography = getTypographySettingsStore();
 
 let container = $state<HTMLElement>();
 
@@ -95,12 +90,28 @@ const isMobile = $derived(responsive?.isMobile ?? false);
 
 let isDragging = $state(false);
 let isTypographyMenuOpen = $state(false);
+/**
+ * Border-box width of the slider track. Drives the slider→position mapping and
+ * the per-char split math (pointer events are measured against this same box).
+ */
 let containerWidth = $state(0);
+/**
+ * Content-box width of the slider track (border box minus the responsive CSS
+ * gutters). The width the text lays out into, and what the line-breaker fits
+ * within. Measured rather than derived from a padding constant so it tracks the
+ * breakpoint gutters.
+ */
+let contentWidth = $state(0);
 
-// New high-performance layout engine
-const comparisonEngine = new CharacterComparisonEngine();
+const layout = new DualFontLayout();
 
-let layoutResult = $state<ReturnType<typeof comparisonEngine.layout>>({ lines: [], totalHeight: 0 });
+let layoutResult = $state<ComparisonResult>({ lines: [], totalHeight: 0 });
+
+/**
+ * N-window size for the per-char crossfade zone around the slider split.
+ * Tuned so chars complete their 100ms opacity crossfade before exiting the window.
+ */
+const WINDOW_SIZE = 5;
 
 // Track container width changes (window resize, sidebar toggle, etc.)
 $effect(() => {
@@ -110,10 +121,14 @@ $effect(() => {
 
     const observer = new ResizeObserver(entries => {
         for (const entry of entries) {
-            // Use borderBoxSize if available, fallback to contentRect
-            const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
-            if (width > 0) {
-                containerWidth = width;
+            // Border box for slider/pointer math, content box for text width.
+            const border = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+            const content = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+            if (border > 0) {
+                containerWidth = border;
+            }
+            if (content > 0) {
+                contentWidth = content;
             }
         }
     });
@@ -222,7 +237,7 @@ $effect(() => {
     }
 });
 
-// Layout effect — depends on content, settings AND containerWidth.
+// Layout effect — depends on content, settings, and contentWidth.
 // Awaits font loading into the canvas measurement context before invoking
 // the engine; otherwise pretext caches fallback-font widths globally per
 // font string, and the morph boundary drifts from the thumb visually.
@@ -232,18 +247,15 @@ $effect(() => {
     const _size = typography.renderedSize;
     const _height = typography.height;
     const _spacing = typography.spacing;
-    const _width = containerWidth;
-    const _isMobile = isMobile;
+    const availableWidth = contentWidth;
 
-    if (!container || !fontA || !fontB || _width <= 0) {
+    if (!container || !fontA || !fontB || availableWidth <= 0) {
         return;
     }
 
     const fontAStr = getPretextFontString(_weight, _size, fontA.name);
     const fontBStr = getPretextFontString(_weight, _size, fontB.name);
 
-    const padding = _isMobile ? SLIDER_PADDING_MOBILE_PX : SLIDER_PADDING_DESKTOP_PX;
-    const availableWidth = Math.max(0, _width - padding);
     const lineHeight = _size * _height;
 
     let cancelled = false;
@@ -251,7 +263,7 @@ $effect(() => {
         if (cancelled) {
             return;
         }
-        layoutResult = comparisonEngine.layout(
+        layoutResult = layout.layout(
             _text,
             fontAStr,
             fontBStr,
@@ -330,17 +342,9 @@ $effect(() => {
                             my-auto
                         "
                     >
-                        {#each layoutResult.lines as line}
-                            {@const lineStates = comparisonEngine.getLineCharStates(line, sliderPos, containerWidth)}
-                            <Line chars={line.chars}>
-                                {#snippet character({ char, index })}
-                                    <Character
-                                        {char}
-                                        proximity={lineStates[index]?.proximity ?? 0}
-                                        isPast={lineStates[index]?.isPast ?? false}
-                                    />
-                                {/snippet}
-                            </Line>
+                        {#each layoutResult.lines as line, lineIdx (lineIdx)}
+                            {@const split = findSplitIndex(line, sliderPos, containerWidth)}
+                            <Line {line} {split} windowSize={WINDOW_SIZE} />
                         {/each}
                     </div>
 
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 928392a..35b3e29 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -6,7 +6,7 @@
 import {
     FilterControls,
     Filters,
-    appliedFilterStore,
+    getAppliedFilterStore,
 } from '$features/FilterAndSortFonts';
 import { springySlideFade } from '$shared/lib';
 import {
@@ -31,6 +31,8 @@ interface Props {
 
 let { showFilters = $bindable(true) }: Props = $props();
 
+const appliedFilterStore = getAppliedFilterStore();
+
 const transform = new Tween(
     { scale: 1, rotate: 0 },
     { duration: 250, easing: cubicOut },
diff --git a/src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte b/src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte
index 361c541..442711b 100644
--- a/src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte
+++ b/src/widgets/FontSearch/ui/FontSearchSection/FontSearchSection.svelte
@@ -3,7 +3,7 @@
     Wraps FontSearch with a Section component
 -->
 <script lang="ts">
-import { NavigationWrapper } from '$entities/Breadcrumb';
+import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import { Section } from '$shared/ui';
diff --git a/src/widgets/Footer/ui/Footer/Footer.svelte.test.ts b/src/widgets/Footer/ui/Footer/Footer.svelte.test.ts
index 420c95b..3f516c8 100644
--- a/src/widgets/Footer/ui/Footer/Footer.svelte.test.ts
+++ b/src/widgets/Footer/ui/Footer/Footer.svelte.test.ts
@@ -2,12 +2,8 @@ import {
     render,
     screen,
 } from '@testing-library/svelte';
-import { setContext } from 'svelte';
 import Footer from './Footer.svelte';
 
-// Mock component to provide context
-import ContextWrapper from '$shared/lib/providers/ResponsiveProvider/ResponsiveProvider.svelte';
-
 describe('Footer', () => {
     const currentYear = new Date().getFullYear();
 
@@ -18,7 +14,7 @@ describe('Footer', () => {
             isDesktopLarge: false,
         };
 
-        const { container } = render(Footer, {
+        render(Footer, {
             context: new Map([['responsive', mockResponsive]]),
         });
 
diff --git a/src/widgets/SampleList/model/index.ts b/src/widgets/SampleList/model/index.ts
index 3209708..b99a59f 100644
--- a/src/widgets/SampleList/model/index.ts
+++ b/src/widgets/SampleList/model/index.ts
@@ -1,2 +1,2 @@
-export { layoutManager } from './stores';
+export { getLayoutManager } from './stores';
 export type { LayoutMode } from './stores';
diff --git a/src/widgets/SampleList/model/stores/index.ts b/src/widgets/SampleList/model/stores/index.ts
index 5ff5e64..9eedb6f 100644
--- a/src/widgets/SampleList/model/stores/index.ts
+++ b/src/widgets/SampleList/model/stores/index.ts
@@ -1,2 +1,2 @@
-export { layoutManager } from './layoutStore/layoutStore.svelte';
+export { getLayoutManager } from './layoutStore/layoutStore.svelte';
 export type { LayoutMode } from './layoutStore/layoutStore.svelte';
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
index c1f4e8b..ea25a68 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
@@ -16,8 +16,11 @@
  * - Desktop Large (>= 1280px): 4 columns
  */
 
-import { createPersistentStore } from '$shared/lib';
-import { responsiveManager } from '$shared/lib';
+import {
+    createPersistentStore,
+    createSingleton,
+    responsiveManager,
+} from '$shared/lib';
 
 export type LayoutMode = 'list' | 'grid';
 
@@ -144,12 +147,25 @@ class LayoutManager {
         this.#mode = DEFAULT_CONFIG.mode;
         this.#store.clear();
     }
+
+    /**
+     * Dispose the persistent store's save effect. Call on store disposal.
+     */
+    destroy(): void {
+        this.#store.destroy();
+    }
 }
 
 /**
- * Singleton layout manager instance
+ * App-wide layout manager, created on first access. Lazy so its persisted
+ * layout preference isn't read at module load.
  */
-export const layoutManager = new LayoutManager();
+const layoutManager = createSingleton(() => new LayoutManager(), instance => instance.destroy());
+
+export const getLayoutManager = layoutManager.get;
+
+// test-only reset, so specs don't share persisted layout state
+export const __resetLayoutManager = layoutManager.reset;
 
 // Export class for testing purposes
 export { LayoutManager };
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
index 6dc2d19..b96ea16 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
@@ -3,7 +3,6 @@
  */
 
 import {
-    afterEach,
     beforeEach,
     describe,
     expect,
@@ -71,12 +70,17 @@ describe('layoutStore', () => {
         });
 
         it('should default to list mode when localStorage has invalid data', async () => {
+            // createPersistentStore logs and swallows the parse error; silence
+            // the expected warn so it doesn't pollute test output, and assert it.
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
             localStorage.setItem(STORAGE_KEY, 'invalid json');
 
             const { LayoutManager } = await import('./layoutStore.svelte');
             const manager = new LayoutManager();
 
             expect(manager.mode).toBe('list');
+            expect(warnSpy).toHaveBeenCalled();
+            warnSpy.mockRestore();
         });
 
         it('should default to list mode when localStorage has empty object', async () => {
diff --git a/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
index 0c17d32..b240375 100644
--- a/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
+++ b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte
@@ -7,7 +7,7 @@ import { ButtonGroup } from '$shared/ui';
 import { IconButton } from '$shared/ui';
 import GridIcon from '@lucide/svelte/icons/layout-grid';
 import ListIcon from '@lucide/svelte/icons/stretch-horizontal';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 
 interface Props {
     /**
@@ -18,18 +18,21 @@ interface Props {
 
 const { class: className }: Props = $props();
 
+const layoutManager = getLayoutManager();
+const mode = $derived(layoutManager.mode);
+
 function handleClick() {
     layoutManager.toggleMode();
 }
 </script>
 
 <ButtonGroup class={className}>
-    <IconButton active={layoutManager.mode === 'list'} onclick={handleClick}>
+    <IconButton active={mode === 'list'} onclick={handleClick}>
         {#snippet icon()}
             <ListIcon class="size-4" />
         {/snippet}
     </IconButton>
-    <IconButton active={layoutManager.mode === 'grid'} onclick={handleClick}>
+    <IconButton active={mode === 'grid'} onclick={handleClick}>
         {#snippet icon()}
             <GridIcon class="size-4" />
         {/snippet}
diff --git a/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts
index bf591bb..576d6dc 100644
--- a/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts
+++ b/src/widgets/SampleList/ui/LayoutSwitch/LayoutSwitch.svelte.test.ts
@@ -4,14 +4,23 @@ import {
     screen,
     waitFor,
 } from '@testing-library/svelte';
-import { layoutManager } from '../../model';
+import { afterEach } from 'vitest';
+import { getLayoutManager } from '../../model';
+import { __resetLayoutManager } from '../../model/stores/layoutStore/layoutStore.svelte';
 import LayoutSwitch from './LayoutSwitch.svelte';
 
 describe('LayoutSwitch', () => {
+    let layoutManager: ReturnType<typeof getLayoutManager>;
+
     beforeEach(() => {
+        layoutManager = getLayoutManager();
         layoutManager.reset();
     });
 
+    afterEach(() => {
+        __resetLayoutManager();
+    });
+
     describe('Rendering', () => {
         it('renders two icon buttons', () => {
             render(LayoutSwitch);
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 2d37b8a..4c16149 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -6,19 +6,27 @@
 -->
 <script lang="ts">
 import {
+    FontSampler,
     FontVirtualList,
     createFontRowSizeResolver,
-    fontCatalogStore,
-    fontLifecycleManager,
+    getFontCatalog,
+    getFontLifecycleManager,
 } from '$entities/Font';
 import {
     TypographyMenu,
-    typographySettingsStore,
+    getTypographySettingsStore,
 } from '$features/AdjustTypography';
-import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
+
+const fontCatalog = getFontCatalog();
+const typographySettingsStore = getTypographySettingsStore();
+const fontLifecycleManager = getFontLifecycleManager();
+const layoutManager = getLayoutManager();
+
+const columns = $derived(layoutManager.columns);
+const gap = $derived(layoutManager.gap);
 
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
@@ -42,14 +50,16 @@ const SAMPLER_FALLBACK_HEIGHT = 220;
  */
 const CHECK_POSITION_THROTTLE_MS = 100;
 
-let text = $state('The quick brown fox jumps over the lazy dog...');
+const fonts = $derived(fontCatalog?.fonts);
+
+let text = $state<string>('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
 // Binds to the actual window height
-let innerHeight = $state(0);
+let innerHeight = $state<number>(0);
 // Is the component above the middle of the viewport?
-let isAboveMiddle = $state(false);
+let isAboveMiddle = $state<boolean>(false);
 // Inner width of the wrapper div — updated by bind:clientWidth on mount and resize.
-let containerWidth = $state(0);
+let containerWidth = $state<number>(0);
 
 const checkPosition = throttle(() => {
     if (!wrapper) {
@@ -67,7 +77,7 @@ const checkPosition = throttle(() => {
 // change triggers a full offsets recompute in createVirtualizer — no DOM snap.
 const fontRowHeight = $derived.by(() =>
     createFontRowSizeResolver({
-        getFonts: () => fontCatalogStore.fonts,
+        getFonts: () => fonts,
         getWeight: () => typographySettingsStore.weight,
         getPreviewText: () => text,
         getContainerWidth: () => containerWidth,
@@ -106,12 +116,18 @@ const fontRowHeight = $derived.by(() =>
         itemHeight={fontRowHeight}
         useWindowScroll={true}
         weight={typographySettingsStore.weight}
-        columns={layoutManager.columns}
-        gap={layoutManager.gap}
+        {columns}
+        {gap}
         {skeleton}
     >
         {#snippet children({ item: font, index })}
-            <FontSampler bind:text {font} {index} />
+            <!--
+                Resolve load status here (the widget owns the lifecycle store) and
+                pass it down — FontSampler and FontApplicator stay store-decoupled.
+                getFontStatus reads a $state SvelteMap, so the row stays reactive.
+            -->
+            {@const status = fontLifecycleManager.getFontStatus(font.id, typographySettingsStore.weight, font.features?.isVariable)}
+            <FontSampler bind:text {font} {index} {status} typography={typographySettingsStore} />
         {/snippet}
     </FontVirtualList>
 
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index f926be3..477e623 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -3,8 +3,8 @@
     Wraps SampleList with a Section component
 -->
 <script lang="ts">
-import { NavigationWrapper } from '$entities/Breadcrumb';
-import { fontCatalogStore } from '$entities/Font';
+import { getFontCatalog } from '$entities/Font';
+import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import {
@@ -12,7 +12,7 @@ import {
     Section,
 } from '$shared/ui';
 import { getContext } from 'svelte';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
 import SampleList from '../SampleList/SampleList.svelte';
 
@@ -26,6 +26,12 @@ interface Props {
 const { index }: Props = $props();
 
 const responsive = getContext<ResponsiveManager>('responsive');
+
+const fontCatalog = getFontCatalog();
+const total = $derived<number>(fontCatalog?.pagination?.total);
+
+const layoutManager = getLayoutManager();
+const mode = $derived(layoutManager.mode);
 </script>
 
 <NavigationWrapper index={2} title="Samples">
@@ -36,14 +42,14 @@ const responsive = getContext<ResponsiveManager>('responsive');
             id="sample_set"
             title="Sample Set"
             headerTitle="visual_output"
-            headerSubtitle="items_total: {fontCatalogStore.pagination.total ?? 0}"
+            headerSubtitle="items_total: {total ?? 0}"
             headerAction={registerAction}
         >
             {#snippet headerContent()}
                 <div class="flex items-center gap-3 md:gap-4">
                     <div class="hidden md:flex items-center gap-2 mr-4">
                         <Label variant="muted" size="sm">view_mode: </Label>
-                        <Label variant="default" size="sm" bold>{layoutManager.mode}</Label>
+                        <Label variant="default" size="sm" bold>{mode}</Label>
                     </div>
                     <LayoutSwitch />
                 </div>
diff --git a/tsconfig.json b/tsconfig.json
index f80031d..9edeb0d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,6 @@
 
     /* Path Aliases */
     "paths": {
-      "$lib/*": ["./src/lib/*"],
       "$app/*": ["./src/app/*"],
       "$widgets/*": ["./src/widgets/*"],
       "$shared/*": ["./src/shared/*"],
diff --git a/vite.config.ts b/vite.config.ts
index 64a58d9..3390611 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,6 @@ export default defineConfig({
     plugins: [svelte(), tailwindcss()],
     resolve: {
         alias: {
-            $lib: '/src/lib',
             $app: '/src/app',
             $shared: '/src/shared',
             $entities: '/src/entities',
diff --git a/vitest.config.browser.ts b/vitest.config.browser.ts
index c210118..96ff9b0 100644
--- a/vitest.config.browser.ts
+++ b/vitest.config.browser.ts
@@ -23,7 +23,6 @@ export default defineConfig({
 
     resolve: {
         alias: {
-            $lib: path.resolve(__dirname, './src/lib'),
             $app: path.resolve(__dirname, './src/app'),
             $shared: path.resolve(__dirname, './src/shared'),
             $entities: path.resolve(__dirname, './src/entities'),
diff --git a/vitest.config.component.ts b/vitest.config.component.ts
index a293814..a75af34 100644
--- a/vitest.config.component.ts
+++ b/vitest.config.component.ts
@@ -21,7 +21,6 @@ export default defineConfig({
     resolve: {
         conditions: ['browser'],
         alias: {
-            $lib: path.resolve(__dirname, './src/lib'),
             $app: path.resolve(__dirname, './src/app'),
             $shared: path.resolve(__dirname, './src/shared'),
             $entities: path.resolve(__dirname, './src/entities'),
diff --git a/vitest.config.ts b/vitest.config.ts
index 3ed6693..fd3f04e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -53,7 +53,6 @@ export default defineConfig({
     resolve: {
         conditions: process.env.VITEST ? ['browser'] : undefined,
         alias: {
-            $lib: path.resolve(__dirname, './src/lib'),
             $app: path.resolve(__dirname, './src/app'),
             $shared: path.resolve(__dirname, './src/shared'),
             $entities: path.resolve(__dirname, './src/entities'),
diff --git a/vitest.setup.component.ts b/vitest.setup.component.ts
index 32236e5..001a965 100644
--- a/vitest.setup.component.ts
+++ b/vitest.setup.component.ts
@@ -1,4 +1,4 @@
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
 import * as matchers from '@testing-library/jest-dom/matchers';
 import { cleanup } from '@testing-library/svelte';
 import {
@@ -14,7 +14,7 @@ expect.extend(matchers);
 
 afterEach(() => {
     cleanup();
-    queryClient.clear();
+    getQueryClient().clear();
 });
 
 // Mock window.matchMedia for components that use it
diff --git a/yarn.lock b/yarn.lock
index d607270..17707ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2339,7 +2339,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm-env@npm:^1.2.1":
+"esm-env@npm:^1.2.1, esm-env@npm:^1.2.2":
   version: 1.2.2
   resolution: "esm-env@npm:1.2.2"
   checksum: 10c0/3d25c973f2fd69c25ffff29c964399cea573fe10795ecc1d26f6f957ce0483d3254e1cceddb34bf3296a0d7b0f1d53a28992f064ba509dfe6366751e752c4166
@@ -2533,6 +2533,7 @@ __metadata:
     oxlint: "npm:1.62.0"
     playwright: "npm:1.59.1"
     storybook: "npm:10.3.6"
+    sv-router: "npm:^0.16.3"
     svelte: "npm:5.55.5"
     svelte-check: "npm:4.4.8"
     svelte-language-server: "npm:0.18.0"
@@ -3889,6 +3890,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sv-router@npm:^0.16.3":
+  version: 0.16.3
+  resolution: "sv-router@npm:0.16.3"
+  dependencies:
+    esm-env: "npm:^1.2.2"
+  peerDependencies:
+    svelte: ^5
+  bin:
+    sv-router: ./src/cli/index.js
+  checksum: 10c0/809263498b38828f869b613919946fd4ac899435cbb32396fdab43fba53aec612383f05f6661c1bfd0f5f78c395dc4fcf0b88b8bcd5da0e55a5280138ad884fb
+  languageName: node
+  linkType: hard
+
 "svelte-ast-print@npm:^0.4.0":
   version: 0.4.2
   resolution: "svelte-ast-print@npm:0.4.2"