From f6911fbcca934bfd77ac5364d7a80e08410d4c49 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 18:31:56 +0300
Subject: [PATCH 01/67] feature: add sv-router, page structure and redirect to
 home from any other page

---
 package.json                            |  3 ++-
 src/app/App.svelte                      |  9 +++++----
 src/routes/{Page.svelte => Home.svelte} |  4 ++--
 src/routes/Redirect.svelte              | 10 ++++++++++
 src/routes/index.ts                     |  7 +++++++
 src/routes/router.ts                    | 23 +++++++++++++++++++++++
 yarn.lock                               | 16 +++++++++++++++-
 7 files changed, 64 insertions(+), 8 deletions(-)
 rename src/routes/{Page.svelte => Home.svelte} (81%)
 create mode 100644 src/routes/Redirect.svelte
 create mode 100644 src/routes/index.ts
 create mode 100644 src/routes/router.ts

diff --git a/package.json b/package.json
index 8ff3064..ef02d67 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,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..6f9fccc 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -6,21 +6,22 @@
 /**
  * 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 '$routes/router';
+import { Router } from 'sv-router';
 import { QueryProvider } from './providers';
 import Layout from './ui/Layout.svelte';
 </script>
 
 <QueryProvider>
     <Layout>
-        <Page />
+        <Router />
     </Layout>
 </QueryProvider>
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..49e21cd
--- /dev/null
+++ b/src/routes/router.ts
@@ -0,0 +1,23 @@
+import { createRouter } from 'sv-router';
+import Home from './Home.svelte';
+import Redirect from './Redirect.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.
+     */
+    '*notfound': Redirect,
+});
diff --git a/yarn.lock b/yarn.lock
index 992f596..be38bb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2382,7 +2382,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esm-env@npm:^1.0.0, esm-env@npm:^1.1.2, esm-env@npm:^1.2.1":
+"esm-env@npm:^1.0.0, esm-env@npm:^1.1.2, 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
@@ -2577,6 +2577,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"
@@ -3966,6 +3967,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"
-- 
2.52.0


From ddadac86863e1c63ff0ee57be0ef354499a78c37 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 18:48:53 +0300
Subject: [PATCH 02/67] reafactor: move CharacterComparisonEngine into Font
 entity

---
 .../CharacterComparisonEngine.svelte.ts       |  2 --
 .../CharacterComparisonEngine.test.ts         |  2 +-
 src/entities/Font/lib/index.ts                |  6 ++++++
 src/shared/lib/helpers/index.ts               | 19 -------------------
 src/shared/lib/index.ts                       |  3 ---
 .../ui/SliderArea/SliderArea.svelte           |  4 +---
 6 files changed, 8 insertions(+), 28 deletions(-)
 rename src/{shared/lib/helpers => entities/Font/lib}/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts (99%)
 rename src/{shared/lib/helpers => entities/Font/lib}/CharacterComparisonEngine/CharacterComparisonEngine.test.ts (98%)

diff --git a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
similarity index 99%
rename from src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
rename to src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
index 1816218..232b621 100644
--- a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
+++ b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
@@ -13,8 +13,6 @@ 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;
 
diff --git a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
similarity index 98%
rename from src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
rename to src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
index 09a4f5f..43ed97d 100644
--- a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
+++ b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { installCanvasMock } from '$shared/lib/helpers/__mocks__/canvas';
 import { clearCache } from '@chenglou/pretext';
 import {
     beforeEach,
@@ -6,7 +7,6 @@ import {
     expect,
     it,
 } from 'vitest';
-import { installCanvasMock } from '../__mocks__/canvas';
 import { CharacterComparisonEngine } from './CharacterComparisonEngine.svelte';
 
 // FontA: 10px per character. FontB: 15px per character.
diff --git a/src/entities/Font/lib/index.ts b/src/entities/Font/lib/index.ts
index 161c396..436676c 100644
--- a/src/entities/Font/lib/index.ts
+++ b/src/entities/Font/lib/index.ts
@@ -1,3 +1,9 @@
+export {
+    CharacterComparisonEngine,
+    type ComparisonLine,
+    type ComparisonResult,
+} from './CharacterComparisonEngine/CharacterComparisonEngine.svelte';
+
 export { getFontUrl } from './getFontUrl/getFontUrl';
 
 // Mock data helpers for Storybook and testing
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index ba2bb77..56a185c 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -7,7 +7,6 @@
  * - 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
@@ -116,24 +115,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
  */
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 42fccfb..81cd249 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,9 +5,6 @@
  */
 
 export {
-    CharacterComparisonEngine,
-    type ComparisonLine,
-    type ComparisonResult,
     type ControlDataModel,
     type ControlModel,
     createDebouncedState,
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index a5ae2de..9e3708f 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -9,6 +9,7 @@
 -->
 <script lang="ts">
 import {
+    CharacterComparisonEngine,
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
@@ -20,9 +21,6 @@ import {
     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';
-- 
2.52.0


From c5092a488bedd167120dc6dca8eb2112d6489f74 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 21:48:56 +0300
Subject: [PATCH 03/67] refactor(font): scaffold dualFontLayout module with
 shared types

---
 .../DualFontLayout/DualFontLayout.ts          | 87 +++++++++++++++++++
 .../computeLineRenderModel.test.ts            |  5 ++
 .../computeLineRenderModel.ts                 | 45 ++++++++++
 src/entities/Font/lib/dualFontLayout/index.ts |  8 ++
 4 files changed, 145 insertions(+)
 create mode 100644 src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
 create mode 100644 src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
 create mode 100644 src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
 create mode 100644 src/entities/Font/lib/dualFontLayout/index.ts

diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
new file mode 100644
index 0000000..3451ec5
--- /dev/null
+++ b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
@@ -0,0 +1,87 @@
+/**
+ * Internal shape of pretext's PreparedTextWithSegments — only `segments` is in
+ * pretext's public TS type; the numeric arrays exist at runtime but are not in
+ * the published signature. Verified against node_modules/@chenglou/pretext/src/layout.ts.
+ */
+interface PretextInternals {
+    /**
+     * Per-segment text.
+     */
+    segments: string[];
+    /**
+     * Per-segment full width in pixels.
+     */
+    widths: number[];
+    /**
+     * Per-segment per-grapheme advance widths, or null when the segment is a single grapheme.
+     */
+    breakableFitAdvances: (number[] | null)[];
+    /**
+     * Per-segment line-end fit advance.
+     */
+    lineEndFitAdvances: number[];
+    /**
+     * Per-segment line-end paint advance.
+     */
+    lineEndPaintAdvances: number[];
+}
+
+/**
+ * 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;
+}
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
new file mode 100644
index 0000000..1d9575b
--- /dev/null
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -0,0 +1,5 @@
+import { describe } from 'vitest';
+
+describe('computeLineRenderModel', () => {
+    // tests added in subsequent tasks
+});
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
new file mode 100644
index 0000000..b179382
--- /dev/null
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -0,0 +1,45 @@
+import type {
+    ComparisonChar,
+    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;
+}
+
+export function computeLineRenderModel(
+    line: ComparisonLine,
+    sliderPos: number,
+    containerWidth: number,
+    windowSize: number,
+): LineRenderModel {
+    throw new Error('not implemented');
+}
diff --git a/src/entities/Font/lib/dualFontLayout/index.ts b/src/entities/Font/lib/dualFontLayout/index.ts
new file mode 100644
index 0000000..0c8da73
--- /dev/null
+++ b/src/entities/Font/lib/dualFontLayout/index.ts
@@ -0,0 +1,8 @@
+export type {
+    ComparisonLine,
+    ComparisonResult,
+} from './DualFontLayout/DualFontLayout';
+export {
+    computeLineRenderModel,
+    type LineRenderModel,
+} from './computeLineRenderModel/computeLineRenderModel';
-- 
2.52.0


From efbc464b14f73e344909bae4fc050a60a13c2151 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 21:49:25 +0300
Subject: [PATCH 04/67] test(font): computeLineRenderModel handles empty line

---
 .../computeLineRenderModel.test.ts            | 44 ++++++++++++++++++-
 .../computeLineRenderModel.ts                 |  3 ++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
index 1d9575b..8b95fd9 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -1,5 +1,45 @@
-import { describe } from 'vitest';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
+import { computeLineRenderModel } 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;
+}
 
 describe('computeLineRenderModel', () => {
-    // tests added in subsequent tasks
+    it('returns empty model for an empty line', () => {
+        const line = makeLine([]);
+        const model = computeLineRenderModel(line, 50, 500, 5);
+        expect(model.leftText).toBe('');
+        expect(model.windowChars).toEqual([]);
+        expect(model.rightText).toBe('');
+    });
 });
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index b179382..aa31215 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -41,5 +41,8 @@ export function computeLineRenderModel(
     containerWidth: number,
     windowSize: number,
 ): LineRenderModel {
+    if (line.chars.length === 0) {
+        return { leftText: '', windowChars: [], rightText: '' };
+    }
     throw new Error('not implemented');
 }
-- 
2.52.0


From ccf51c645ee796f502ee71b68a1a4199066e87dd Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 21:50:02 +0300
Subject: [PATCH 05/67] feat(font): compute split index and 3-region slice

---
 .../computeLineRenderModel.test.ts            | 42 ++++++++++++
 .../computeLineRenderModel.ts                 | 68 ++++++++++++++++++-
 2 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
index 8b95fd9..cdd79ad 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -42,4 +42,46 @@ describe('computeLineRenderModel', () => {
         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 = computeLineRenderModel(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 = computeLineRenderModel(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 = computeLineRenderModel(line, 51, 300, 0);
+        expect(model.leftText).toBe('AB');
+        expect(model.rightText).toBe('C');
+    });
 });
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index aa31215..5873690 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -41,8 +41,72 @@ export function computeLineRenderModel(
     containerWidth: number,
     windowSize: number,
 ): LineRenderModel {
-    if (line.chars.length === 0) {
+    const chars = line.chars;
+    const n = chars.length;
+    if (n === 0) {
         return { leftText: '', windowChars: [], rightText: '' };
     }
-    throw new Error('not implemented');
+
+    const split = findSplitIndex(chars, sliderPos, containerWidth);
+
+    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 };
+}
+
+/**
+ * Walks chars left-to-right computing the per-char threshold using prefix sums
+ * of widthA (past chars, fontA) and suffix sums of widthB (future chars, fontB).
+ * Returns the count of chars whose threshold the slider has passed.
+ */
+function findSplitIndex(
+    chars: ComparisonChar[],
+    sliderPos: number,
+    containerWidth: number,
+): number {
+    const n = chars.length;
+    const sliderX = (sliderPos / 100) * containerWidth;
+
+    const prefA = new Float64Array(n + 1);
+    for (let i = 0; i < n; i++) {
+        prefA[i + 1] = prefA[i] + chars[i].widthA;
+    }
+    const sufB = new Float64Array(n + 1);
+    for (let i = n - 1; i >= 0; i--) {
+        sufB[i] = sufB[i + 1] + chars[i].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;
+}
+
+function clamp(value: number, lo: number, hi: number): number {
+    if (value < lo) {
+        return lo;
+    }
+    if (value > hi) {
+        return hi;
+    }
+    return value;
 }
-- 
2.52.0


From f4edb67acb2894541100fc865e9dab9914114121 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 21:50:34 +0300
Subject: [PATCH 06/67] test(font): window centering, clamping, and key
 stability

---
 .../computeLineRenderModel.test.ts            | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
index cdd79ad..db8206e 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -84,4 +84,94 @@ describe('computeLineRenderModel', () => {
         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 = computeLineRenderModel(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 = computeLineRenderModel(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 = computeLineRenderModel(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 = computeLineRenderModel(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 = computeLineRenderModel(line, 40, 300, 3);
+        const b = computeLineRenderModel(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 = computeLineRenderModel(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));
+        }
+    });
 });
-- 
2.52.0


From f13dfe1caf76dbd44688c56f2d9deb1efd84ed7f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:06:47 +0300
Subject: [PATCH 07/67] chore: add jsdoc comment

---
 .../computeLineRenderModel.ts                 | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index 5873690..76445db 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -35,6 +35,19 @@ export interface LineRenderModel {
     rightText: string;
 }
 
+/**
+ * Slices a laid-out line into three regions around the slider's 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.
+ * Safe to invoke per slider frame; `line.chars` is treated as read-only.
+ *
+ * @param line           Line from `DualFontLayout.layout()`. Empty `chars` yields an empty model.
+ * @param sliderPos      Slider position in percent of `containerWidth`, range 0..100.
+ * @param containerWidth Container width in pixels, used to translate `sliderPos` to a threshold x.
+ * @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,
     sliderPos: number,
@@ -66,9 +79,13 @@ export function computeLineRenderModel(
 }
 
 /**
- * Walks chars left-to-right computing the per-char threshold using prefix sums
- * of widthA (past chars, fontA) and suffix sums of widthB (future chars, fontB).
- * Returns the count of chars whose threshold the slider has passed.
+ * Returns the count of chars whose flip threshold the slider has crossed.
+ *
+ * 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.
  */
 function findSplitIndex(
     chars: ComparisonChar[],
@@ -101,6 +118,9 @@ function findSplitIndex(
     return split;
 }
 
+/**
+ * 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;
-- 
2.52.0


From 50238e12c3c2fc8b2a2e3c01537331840bb00385 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:10:17 +0300
Subject: [PATCH 08/67] refactor(findSplitIndex): remove one for cycle

---
 .../computeLineRenderModel/computeLineRenderModel.ts      | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index 76445db..4f506ca 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -96,12 +96,10 @@ function findSplitIndex(
     const sliderX = (sliderPos / 100) * containerWidth;
 
     const prefA = new Float64Array(n + 1);
-    for (let i = 0; i < n; i++) {
-        prefA[i + 1] = prefA[i] + chars[i].widthA;
-    }
     const sufB = new Float64Array(n + 1);
-    for (let i = n - 1; i >= 0; i--) {
-        sufB[i] = sufB[i + 1] + chars[i].widthB;
+    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;
-- 
2.52.0


From 1fa099bef5ef33e83d506b04c33df134458604c5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:12:00 +0300
Subject: [PATCH 09/67] refactor(font): port engine to DualFontLayout with
 typed pretext internals

---
 .../DualFontLayout/DualFontLayout.ts          | 230 ++++++++++++++++++
 1 file changed, 230 insertions(+)

diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
index 3451ec5..29e43e9 100644
--- a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
+++ b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
@@ -1,3 +1,14 @@
+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;
+
 /**
  * Internal shape of pretext's PreparedTextWithSegments — only `segments` is in
  * pretext's public TS type; the numeric arrays exist at runtime but are not in
@@ -26,6 +37,15 @@ interface PretextInternals {
     lineEndPaintAdvances: number[];
 }
 
+/**
+ * Asserts pretext's runtime shape. The public TS type exposes only `segments`;
+ * the numeric arrays exist at runtime but are absent from the published signature.
+ * Centralizing the cast keeps the engine body free of `as any`.
+ */
+function asPretextInternals(prepared: PreparedTextWithSegments): PretextInternals {
+    return prepared as unknown as PretextInternals;
+}
+
 /**
  * Per-grapheme data computed during dual-font layout. Internal to the engine;
  * consumed by computeLineRenderModel to derive the per-frame render model.
@@ -85,3 +105,213 @@ export interface ComparisonResult {
      */
     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.
+ *
+ * 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: PretextInternals | null = null;
+    #preparedB: PretextInternals | null = null;
+    #unifiedPrepared: PretextInternals | 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 = asPretextInternals(prepareWithSegments(text, fontA));
+            this.#preparedB = asPretextInternals(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 };
+        }
+
+        // pretext's `layoutWithLines` is typed against its public surface; pass the
+        // runtime-internal shape through with one boundary cast.
+        const { lines, height } = layoutWithLines(
+            this.#unifiedPrepared as unknown as PreparedTextWithSegments,
+            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: PretextInternals,
+        b: PretextInternals,
+        spacingPx: number = 0,
+    ): PretextInternals {
+        const unified: PretextInternals = { ...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;
+    }
+}
-- 
2.52.0


From 2ece4c5559d27c00c0dd557b18a58443390bc944 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:12:29 +0300
Subject: [PATCH 10/67] test(font): port DualFontLayout tests, drop
 per-char-state cases

---
 .../DualFontLayout/DualFontLayout.test.ts     | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.test.ts

diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.test.ts b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.test.ts
new file mode 100644
index 0000000..f3bc49f
--- /dev/null
+++ b/src/entities/Font/lib/dualFontLayout/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);
+    });
+});
-- 
2.52.0


From 581ffb58872b40dcc7c45ddaaffcdc40be40dee8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:13:26 +0300
Subject: [PATCH 11/67] refactor(font): re-export dualFontLayout from Font
 entity public API

---
 src/entities/Font/lib/dualFontLayout/index.ts | 7 ++++---
 src/entities/Font/lib/index.ts                | 8 +++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/index.ts b/src/entities/Font/lib/dualFontLayout/index.ts
index 0c8da73..66f0434 100644
--- a/src/entities/Font/lib/dualFontLayout/index.ts
+++ b/src/entities/Font/lib/dualFontLayout/index.ts
@@ -1,6 +1,7 @@
-export type {
-    ComparisonLine,
-    ComparisonResult,
+export {
+    type ComparisonLine,
+    type ComparisonResult,
+    DualFontLayout,
 } from './DualFontLayout/DualFontLayout';
 export {
     computeLineRenderModel,
diff --git a/src/entities/Font/lib/index.ts b/src/entities/Font/lib/index.ts
index 436676c..a305d06 100644
--- a/src/entities/Font/lib/index.ts
+++ b/src/entities/Font/lib/index.ts
@@ -1,8 +1,6 @@
-export {
-    CharacterComparisonEngine,
-    type ComparisonLine,
-    type ComparisonResult,
-} from './CharacterComparisonEngine/CharacterComparisonEngine.svelte';
+export { CharacterComparisonEngine } from './CharacterComparisonEngine/CharacterComparisonEngine.svelte';
+
+export * from './dualFontLayout';
 
 export { getFontUrl } from './getFontUrl/getFontUrl';
 
-- 
2.52.0


From 3e568685b375be4aa005520828ff468806eaee40 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:27:44 +0300
Subject: [PATCH 12/67] refactor(font): drop unnecessary PretextInternals shim,
 use pretext type directly

---
 .../DualFontLayout/DualFontLayout.ts          | 67 ++++---------------
 1 file changed, 14 insertions(+), 53 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
index 29e43e9..a572979 100644
--- a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
+++ b/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
@@ -9,43 +9,6 @@ import {
  */
 const DEFAULT_RENDER_SIZE_PX = 16;
 
-/**
- * Internal shape of pretext's PreparedTextWithSegments — only `segments` is in
- * pretext's public TS type; the numeric arrays exist at runtime but are not in
- * the published signature. Verified against node_modules/@chenglou/pretext/src/layout.ts.
- */
-interface PretextInternals {
-    /**
-     * Per-segment text.
-     */
-    segments: string[];
-    /**
-     * Per-segment full width in pixels.
-     */
-    widths: number[];
-    /**
-     * Per-segment per-grapheme advance widths, or null when the segment is a single grapheme.
-     */
-    breakableFitAdvances: (number[] | null)[];
-    /**
-     * Per-segment line-end fit advance.
-     */
-    lineEndFitAdvances: number[];
-    /**
-     * Per-segment line-end paint advance.
-     */
-    lineEndPaintAdvances: number[];
-}
-
-/**
- * Asserts pretext's runtime shape. The public TS type exposes only `segments`;
- * the numeric arrays exist at runtime but are absent from the published signature.
- * Centralizing the cast keeps the engine body free of `as any`.
- */
-function asPretextInternals(prepared: PreparedTextWithSegments): PretextInternals {
-    return prepared as unknown as PretextInternals;
-}
-
 /**
  * Per-grapheme data computed during dual-font layout. Internal to the engine;
  * consumed by computeLineRenderModel to derive the per-frame render model.
@@ -114,6 +77,10 @@ export interface ComparisonResult {
  * 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
@@ -129,9 +96,9 @@ export class DualFontLayout {
     #segmenter: Intl.Segmenter;
 
     // Cached prepared data
-    #preparedA: PretextInternals | null = null;
-    #preparedB: PretextInternals | null = null;
-    #unifiedPrepared: PretextInternals | null = null;
+    #preparedA: PreparedTextWithSegments | null = null;
+    #preparedB: PreparedTextWithSegments | null = null;
+    #unifiedPrepared: PreparedTextWithSegments | null = null;
 
     #lastText = '';
     #lastFontA = '';
@@ -192,8 +159,8 @@ export class DualFontLayout {
 
         // 1. Prepare (or use cache)
         if (isFontChange) {
-            this.#preparedA = asPretextInternals(prepareWithSegments(text, fontA));
-            this.#preparedB = asPretextInternals(prepareWithSegments(text, fontB));
+            this.#preparedA = prepareWithSegments(text, fontA);
+            this.#preparedB = prepareWithSegments(text, fontB);
             this.#unifiedPrepared = this.#createUnifiedPrepared(this.#preparedA, this.#preparedB, spacingPx);
 
             this.#lastText = text;
@@ -207,13 +174,7 @@ export class DualFontLayout {
             return { lines: [], totalHeight: 0 };
         }
 
-        // pretext's `layoutWithLines` is typed against its public surface; pass the
-        // runtime-internal shape through with one boundary cast.
-        const { lines, height } = layoutWithLines(
-            this.#unifiedPrepared as unknown as PreparedTextWithSegments,
-            width,
-            lineHeight,
-        );
+        const { lines, height } = layoutWithLines(this.#unifiedPrepared, width, lineHeight);
 
         // 3. Map results back to both fonts
         const preparedA = this.#preparedA;
@@ -284,11 +245,11 @@ export class DualFontLayout {
      * across both fonts, with `spacingPx` added to model letter-spacing.
      */
     #createUnifiedPrepared(
-        a: PretextInternals,
-        b: PretextInternals,
+        a: PreparedTextWithSegments,
+        b: PreparedTextWithSegments,
         spacingPx: number = 0,
-    ): PretextInternals {
-        const unified: PretextInternals = { ...a };
+    ): 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) =>
-- 
2.52.0


From 61537693178f15caacd8a2cf0d0ffb884ba1bb84 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 30 May 2026 22:29:43 +0300
Subject: [PATCH 13/67] refactor(comparison): switch to 3-section render model
 via DualFontLayout

Rewrite Line.svelte to render leftText / windowChars / rightText regions
from a LineRenderModel. Bulk regions render as native shaped text runs so
the browser applies kerning and ligatures; per-char DOM is reserved for
the N-char crossfade window straddling the slider.

Slim Character.svelte: drop the unused proximity prop and the redundant
font-size/font-weight/letter-spacing styles now inherited from the line
container.

Switch SliderArea.svelte to instantiate DualFontLayout and derive each
line's render model via computeLineRenderModel(line, sliderPos,
containerWidth, WINDOW_SIZE).
---
 .../ui/Character/Character.svelte             | 21 ++------
 .../ComparisonView/ui/Line/Line.svelte        | 50 ++++++++++---------
 .../ui/SliderArea/SliderArea.svelte           | 32 ++++++------
 3 files changed, 46 insertions(+), 57 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index 7261b16..e55c63f 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -3,7 +3,6 @@
     Renders a single character with morphing animation
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/AdjustTypography';
 import { cn } from '$shared/lib';
 import { comparisonStore } from '../../model';
 
@@ -12,26 +11,21 @@ interface Props {
      * Character
      */
     char: string;
-    /**
-     * Proximity value
-     */
-    proximity: number;
     /**
      * Past state
      */
     isPast: boolean;
 }
 
-let { char, proximity, isPast }: Props = $props();
+let { char, isPast }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const typography = $derived(typographySettingsStore);
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? '\u00A0' : char);
+const displayChar = $derived(char === ' ' ? ' ' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -45,12 +39,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">
         {#each [0, 1] as s (s)}
             <span
                 class={cn(
@@ -61,7 +50,6 @@ $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}
@@ -89,7 +77,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/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index d8cb81f..69c5e08 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -1,42 +1,46 @@
 <!--
     Component: Line
-    Renders a line of text in the SliderArea
+    Renders one laid-out line of comparison text as three regions:
+    a fontA bulk run (already past the slider), an N-char window of crossfade
+    slots straddling the slider, and a fontB bulk run (not yet past).
+    Bulk text is rendered as native shaped runs so the browser applies
+    kerning and ligatures; per-char DOM is reserved for the window only.
 -->
 <script lang="ts">
+import type { LineRenderModel } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography';
-import type { Snippet } from 'svelte';
-
-interface LineChar {
-    char: string;
-    xA: number;
-    widthA: number;
-    xB: number;
-    widthB: number;
-}
+import { comparisonStore } 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.
+     * Per-line render slice from computeLineRenderModel.
      */
-    chars: LineChar[];
-    /**
-     * Character render snippet
-     */
-    character: Snippet<[{ char: string; index: number }]>;
+    model: LineRenderModel;
 }
-const typography = $derived(typographySettingsStore);
 
-let { chars, character }: Props = $props();
+let { model }: Props = $props();
+
+const typography = $derived(typographySettingsStore);
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
 </script>
 
 <div
-    class="relative flex w-full justify-center items-center whitespace-nowrap"
+    class="relative flex w-full justify-center items-center whitespace-pre"
     style:height="{typography.height * typography.renderedSize}px"
     style:line-height="{typography.height * typography.renderedSize}px"
+    style:font-size="{typography.renderedSize}px"
+    style:letter-spacing="{typography.spacing}em"
+    style:font-weight={typography.weight}
 >
-    {#each chars as c, index}
-        {@render character?.({ char: c.char, index })}
+    {#if model.leftText}
+        <span style:font-family={fontA?.name}>{model.leftText}</span>
+    {/if}
+    {#each model.windowChars as wc (wc.key)}
+        <Character char={wc.char} isPast={wc.isPast} />
     {/each}
+    {#if model.rightText}
+        <span style:font-family={fontB?.name}>{model.rightText}</span>
+    {/if}
 </div>
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 9e3708f..1a513b4 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -9,10 +9,12 @@
 -->
 <script lang="ts">
 import {
-    CharacterComparisonEngine,
+    type ComparisonResult,
+    DualFontLayout,
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
+    computeLineRenderModel,
 } from '$entities/Font';
 import { TypographyMenu } from '$features/AdjustTypography';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -30,7 +32,6 @@ import {
     getPretextFontString,
 } from '../../lib';
 import { comparisonStore } from '../../model';
-import Character from '../Character/Character.svelte';
 import Line from '../Line/Line.svelte';
 import Thumb from '../Thumb/Thumb.svelte';
 
@@ -95,10 +96,15 @@ let isDragging = $state(false);
 let isTypographyMenuOpen = $state(false);
 let containerWidth = $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(() => {
@@ -249,7 +255,7 @@ $effect(() => {
         if (cancelled) {
             return;
         }
-        layoutResult = comparisonEngine.layout(
+        layoutResult = layout.layout(
             _text,
             fontAStr,
             fontBStr,
@@ -328,17 +334,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 model = computeLineRenderModel(line, sliderPos, containerWidth, WINDOW_SIZE)}
+                            <Line {model} />
                         {/each}
                     </div>
 
-- 
2.52.0


From d5f0814efc1b18e7fc64a73630ea3031dc5febdc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:24:14 +0300
Subject: [PATCH 14/67] fix(comparison): stabilize line rendering, cut per-tick
 re-renders

Extract findSplitIndex; computeLineRenderModel now takes the split index
as a primitive. Line derives its model from `split`, so the $derived
short-circuits on value equality and skips recomputation on spring ticks
that don't move the split (previously every tick rebuilt the model and
re-rendered the line).

Lay the three regions out as inline boxes on a shared baseline. fontA and
fontB now align on the typographic baseline despite differing metrics,
and an always-present overflow:hidden strut pins the line-box baseline so
the line no longer jumps when a bulk run mounts/unmounts or the last
window char morphs to a font of different ascent.
---
 .../computeLineRenderModel.test.ts            |  67 +++++++++---
 .../computeLineRenderModel.ts                 | 101 +++++++++---------
 src/entities/Font/lib/dualFontLayout/index.ts |   1 +
 .../ui/Character/Character.svelte             |  20 +++-
 .../ComparisonView/ui/Line/Line.svelte        |  89 ++++++++++++---
 .../ui/SliderArea/SliderArea.svelte           |   6 +-
 6 files changed, 198 insertions(+), 86 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
index db8206e..e378393 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -4,7 +4,11 @@ import {
     it,
 } from 'vitest';
 import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
-import { computeLineRenderModel } from './computeLineRenderModel';
+import {
+    type LineRenderModel,
+    computeLineRenderModel,
+    findSplitIndex,
+} from './computeLineRenderModel';
 
 /**
  * Build a ComparisonLine fixture with given per-char widths. xA/xB are
@@ -34,10 +38,24 @@ function makeLine(
     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 = computeLineRenderModel(line, 50, 500, 5);
+        const model = compute(line, 50, 500, 5);
         expect(model.leftText).toBe('');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('');
@@ -49,7 +67,7 @@ describe('computeLineRenderModel', () => {
             { char: 'B', widthA: 10, widthB: 10 },
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 0, 500, 0);
+        const model = compute(line, 0, 500, 0);
         expect(model.leftText).toBe('');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('ABC');
@@ -61,7 +79,7 @@ describe('computeLineRenderModel', () => {
             { char: 'B', widthA: 10, widthB: 10 },
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 100, 500, 0);
+        const model = compute(line, 100, 500, 0);
         expect(model.leftText).toBe('ABC');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('');
@@ -80,7 +98,7 @@ describe('computeLineRenderModel', () => {
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
         // Slider just past B's threshold (50%) but not C's (53.33%).
-        const model = computeLineRenderModel(line, 51, 300, 0);
+        const model = compute(line, 51, 300, 0);
         expect(model.leftText).toBe('AB');
         expect(model.rightText).toBe('C');
     });
@@ -95,7 +113,7 @@ describe('computeLineRenderModel', () => {
         ]);
         // Slider past A and B (~thresholds 43.33%, 46.67%); not past C (50%).
         // split = 2 → halfWindow = 1 → windowStart = 1, windowEnd = 4
-        const model = computeLineRenderModel(line, 48, 300, 3);
+        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');
@@ -109,7 +127,7 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 0, 300, 3);
+        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');
@@ -123,7 +141,7 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 100, 300, 3);
+        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('');
@@ -134,7 +152,7 @@ describe('computeLineRenderModel', () => {
             { char: 'A', widthA: 10, widthB: 10 },
             { char: 'B', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 50, 300, 5);
+        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('');
@@ -148,8 +166,8 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const a = computeLineRenderModel(line, 40, 300, 3);
-        const b = computeLineRenderModel(line, 60, 300, 3);
+        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);
@@ -168,10 +186,35 @@ describe('computeLineRenderModel', () => {
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
         // split = 2 → A,B past; C,D,E not
-        const model = computeLineRenderModel(line, 48, 300, 5);
+        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/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index 4f506ca..c7e0a63 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -1,7 +1,4 @@
-import type {
-    ComparisonChar,
-    ComparisonLine,
-} from '../DualFontLayout/DualFontLayout';
+import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
 
 /**
  * Per-line render slice consumed by Line.svelte. The window is centered on the
@@ -35,64 +32,30 @@ export interface LineRenderModel {
     rightText: string;
 }
 
-/**
- * Slices a laid-out line into three regions around the slider's 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.
- * Safe to invoke per slider frame; `line.chars` is treated as read-only.
- *
- * @param line           Line from `DualFontLayout.layout()`. Empty `chars` yields an empty model.
- * @param sliderPos      Slider position in percent of `containerWidth`, range 0..100.
- * @param containerWidth Container width in pixels, used to translate `sliderPos` to a threshold x.
- * @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,
-    sliderPos: number,
-    containerWidth: number,
-    windowSize: number,
-): LineRenderModel {
-    const chars = line.chars;
-    const n = chars.length;
-    if (n === 0) {
-        return { leftText: '', windowChars: [], rightText: '' };
-    }
-
-    const split = findSplitIndex(chars, sliderPos, containerWidth);
-
-    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 };
-}
-
 /**
  * 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.
  */
-function findSplitIndex(
-    chars: ComparisonChar[],
+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);
@@ -116,6 +79,46 @@ function findSplitIndex(
     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`.
  */
diff --git a/src/entities/Font/lib/dualFontLayout/index.ts b/src/entities/Font/lib/dualFontLayout/index.ts
index 66f0434..bffc09f 100644
--- a/src/entities/Font/lib/dualFontLayout/index.ts
+++ b/src/entities/Font/lib/dualFontLayout/index.ts
@@ -5,5 +5,6 @@ export {
 } from './DualFontLayout/DualFontLayout';
 export {
     computeLineRenderModel,
+    findSplitIndex,
     type LineRenderModel,
 } from './computeLineRenderModel/computeLineRenderModel';
diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index e55c63f..175a5f2 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -1,6 +1,10 @@
 <!--
     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 { cn } from '$shared/lib';
@@ -15,9 +19,14 @@ interface Props {
      * Past state
      */
     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, isPast }: Props = $props();
+let { char, isPast, fontSize }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
@@ -25,7 +34,7 @@ const fontB = $derived(comparisonStore.fontB);
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? ' ' : char);
+const displayChar = $derived(char === ' ' ? ' ' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -39,7 +48,7 @@ $effect(() => {
 </script>
 
 {#if fontA && fontB}
-    <span class="char-wrap">
+    <span class="char-wrap" style:font-size="{fontSize}px">
         {#each [0, 1] as s (s)}
             <span
                 class={cn(
@@ -62,9 +71,10 @@ $effect(() => {
 
 <style>
 .char-wrap {
-    display: inline-block;
+    display: inline-flex;
     position: relative;
     line-height: 1;
+    vertical-align: baseline;
 }
 
 .char-inner {
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index 69c5e08..612d230 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -1,46 +1,101 @@
 <!--
     Component: Line
-    Renders one laid-out line of comparison text as three regions:
-    a fontA bulk run (already past the slider), an N-char window of crossfade
-    slots straddling the slider, and a fontB bulk run (not yet past).
-    Bulk text is rendered as native shaped runs so the browser applies
-    kerning and ligatures; per-char DOM is reserved for the window only.
+    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 type { LineRenderModel } from '$entities/Font';
+import {
+    type ComparisonLine,
+    computeLineRenderModel,
+} from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography';
 import { comparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 
 interface Props {
     /**
-     * Per-line render slice from computeLineRenderModel.
+     * Laid-out line from `DualFontLayout.layout()`. Stable across slider movement.
      */
-    model: LineRenderModel;
+    line: ComparisonLine;
+    /**
+     * Count of chars the slider has passed, from `findSplitIndex`.
+     */
+    split: number;
+    /**
+     * Number of chars in the crossfade window around the split.
+     */
+    windowSize: number;
 }
 
-let { model }: Props = $props();
+let { line, split, windowSize }: Props = $props();
+
+const model = $derived(computeLineRenderModel(line, split, windowSize));
 
 const typography = $derived(typographySettingsStore);
 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>
 
+<!--
+    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.
+-->
 <div
-    class="relative flex w-full justify-center items-center whitespace-pre"
-    style:height="{typography.height * typography.renderedSize}px"
-    style:line-height="{typography.height * typography.renderedSize}px"
-    style:font-size="{typography.renderedSize}px"
-    style:letter-spacing="{typography.spacing}em"
+    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 style:font-family={fontA?.name}>{model.leftText}</span>
+        <span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
     {/if}
     {#each model.windowChars as wc (wc.key)}
-        <Character char={wc.char} isPast={wc.isPast} />
+        <Character char={wc.char} isPast={wc.isPast} fontSize={fontSizePx} />
     {/each}
     {#if model.rightText}
-        <span style:font-family={fontB?.name}>{model.rightText}</span>
+        <span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
     {/if}
 </div>
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 1a513b4..892919c 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -14,7 +14,7 @@ import {
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
-    computeLineRenderModel,
+    findSplitIndex,
 } from '$entities/Font';
 import { TypographyMenu } from '$features/AdjustTypography';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -335,8 +335,8 @@ $effect(() => {
                         "
                     >
                         {#each layoutResult.lines as line, lineIdx (lineIdx)}
-                            {@const model = computeLineRenderModel(line, sliderPos, containerWidth, WINDOW_SIZE)}
-                            <Line {model} />
+                            {@const split = findSplitIndex(line, sliderPos, containerWidth)}
+                            <Line {line} {split} windowSize={WINDOW_SIZE} />
                         {/each}
                     </div>
 
-- 
2.52.0


From 4652857512763e924dbd4b5629248eb5a39e2d97 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:25:13 +0300
Subject: [PATCH 15/67] fix(comparison): lay out lines to the content box, not
 a padding guess

availableWidth was containerWidth minus a flat 48/96px constant, but the
slider track's gutters are responsive CSS padding (px-4/8/12/lg:px-24,
per side). At lg the real padding is 192px while only 96 was subtracted,
so lines were broken ~96px too wide and overflowed the container.

Measure the container's content box (ResizeObserver contentBoxSize) and
use it directly as availableWidth; keep the border box for the slider and
split math. The content box already excludes the gutters, so it tracks the
breakpoints with no constant to maintain.
---
 .../ui/SliderArea/SliderArea.svelte           | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 892919c..d5af8ea 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -61,14 +61,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).
  */
@@ -94,7 +86,18 @@ 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);
 
 const layout = new DualFontLayout();
 
@@ -114,10 +117,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;
             }
         }
     });
@@ -226,7 +233,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.
@@ -236,18 +243,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;
-- 
2.52.0


From 02aa27dc48e6bb8743605fa85db9c993ebe23d1f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:25:33 +0300
Subject: [PATCH 16/67] refactor(comparison): drop no-op displayChar mapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The space→non-breaking-space swap guarded against a lone space collapsing
to zero width, but the line container now uses white-space: pre (inherited
by Character), so spaces keep their width. The derived had been reduced to
a space→space identity; render `char` directly.
---
 src/widgets/ComparisonView/ui/Character/Character.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index 175a5f2..9ae91a6 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -34,7 +34,6 @@ const fontB = $derived(comparisonStore.fontB);
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? ' ' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -63,7 +62,7 @@ $effect(() => {
                 style:position={slot === s ? 'relative' : 'absolute'}
                 aria-hidden={slot !== s ? true : undefined}
             >
-                {displayChar}
+                {char}
             </span>
         {/each}
     </span>
-- 
2.52.0


From 6a07b89773d3c70d4b9d9469d9f0ec8ae43e4436 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:36:39 +0300
Subject: [PATCH 17/67] refactor(font): remove CharacterComparisonEngine,
 superseded by DualFontLayout

---
 .../CharacterComparisonEngine.svelte.ts       | 358 ------------------
 .../CharacterComparisonEngine.test.ts         | 160 --------
 src/entities/Font/lib/index.ts                |   2 -
 3 files changed, 520 deletions(-)
 delete mode 100644 src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
 delete mode 100644 src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts

diff --git a/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
deleted file mode 100644
index 232b621..0000000
--- a/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
+++ /dev/null
@@ -1,358 +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()`.
- */
-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/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts b/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
deleted file mode 100644
index 43ed97d..0000000
--- a/src/entities/Font/lib/CharacterComparisonEngine/CharacterComparisonEngine.test.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-// @vitest-environment jsdom
-import { installCanvasMock } from '$shared/lib/helpers/__mocks__/canvas';
-import { clearCache } from '@chenglou/pretext';
-import {
-    beforeEach,
-    describe,
-    expect,
-    it,
-} from 'vitest';
-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/entities/Font/lib/index.ts b/src/entities/Font/lib/index.ts
index a305d06..017b86e 100644
--- a/src/entities/Font/lib/index.ts
+++ b/src/entities/Font/lib/index.ts
@@ -1,5 +1,3 @@
-export { CharacterComparisonEngine } from './CharacterComparisonEngine/CharacterComparisonEngine.svelte';
-
 export * from './dualFontLayout';
 
 export { getFontUrl } from './getFontUrl/getFontUrl';
-- 
2.52.0


From ecdb2f1b7faa1c9eaccbb95995adf5639051fcaf Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:36:39 +0300
Subject: [PATCH 18/67] refactor(shared): remove deprecated TextLayoutEngine
 and its re-exports

---
 .../TextLayoutEngine.svelte.ts                | 183 ------------------
 .../TextLayoutEngine/TextLayoutEngine.test.ts |  89 ---------
 src/shared/lib/helpers/index.ts               |  18 --
 src/shared/lib/index.ts                       |   3 -
 4 files changed, 293 deletions(-)
 delete mode 100644 src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
 delete mode 100644 src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.test.ts

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/index.ts b/src/shared/lib/helpers/index.ts
index 56a185c..4422645 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -115,24 +115,6 @@ export {
     type EntityStore,
 } from './createEntityStore/createEntityStore.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
  */
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 81cd249..c2eaef9 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -24,9 +24,6 @@ export {
     type Property,
     type ResponsiveManager,
     responsiveManager,
-    TextLayoutEngine,
-    type TextLayoutLine,
-    type TextLayoutResult,
     type TypographyControl,
     type VirtualItem,
     type Virtualizer,
-- 
2.52.0


From 7d66b0bc920d7447aa5445a1e70f40a75856e667 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 14:08:09 +0300
Subject: [PATCH 19/67] refactor(font): extract glyph-comparison logic into a
 domain segment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move DualFontLayout and computeLineRenderModel from lib/ to a new
domain/ segment. This is the pure glyph-comparison algorithm — no
framework, no UI, no shared/model dependencies — so it belongs in
domain per the FSD+ ui -> model -> domain interior rule, shielded from
UI-kit and API churn.

Public API is unchanged: the slice index re-exports domain/, so
$entities/Font consumers (ComparisonView SliderArea, Line) are
unaffected.
---
 .../DualFontLayout/DualFontLayout.test.ts                       | 0
 .../dualFontLayout => domain}/DualFontLayout/DualFontLayout.ts  | 0
 .../computeLineRenderModel/computeLineRenderModel.test.ts       | 0
 .../computeLineRenderModel/computeLineRenderModel.ts            | 0
 src/entities/Font/{lib/dualFontLayout => domain}/index.ts       | 0
 src/entities/Font/index.ts                                      | 1 +
 src/entities/Font/lib/index.ts                                  | 2 --
 7 files changed, 1 insertion(+), 2 deletions(-)
 rename src/entities/Font/{lib/dualFontLayout => domain}/DualFontLayout/DualFontLayout.test.ts (100%)
 rename src/entities/Font/{lib/dualFontLayout => domain}/DualFontLayout/DualFontLayout.ts (100%)
 rename src/entities/Font/{lib/dualFontLayout => domain}/computeLineRenderModel/computeLineRenderModel.test.ts (100%)
 rename src/entities/Font/{lib/dualFontLayout => domain}/computeLineRenderModel/computeLineRenderModel.ts (100%)
 rename src/entities/Font/{lib/dualFontLayout => domain}/index.ts (100%)

diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.test.ts b/src/entities/Font/domain/DualFontLayout/DualFontLayout.test.ts
similarity index 100%
rename from src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.test.ts
rename to src/entities/Font/domain/DualFontLayout/DualFontLayout.test.ts
diff --git a/src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts b/src/entities/Font/domain/DualFontLayout/DualFontLayout.ts
similarity index 100%
rename from src/entities/Font/lib/dualFontLayout/DualFontLayout/DualFontLayout.ts
rename to src/entities/Font/domain/DualFontLayout/DualFontLayout.ts
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.test.ts
similarity index 100%
rename from src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
rename to src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.test.ts
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.ts
similarity index 100%
rename from src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
rename to src/entities/Font/domain/computeLineRenderModel/computeLineRenderModel.ts
diff --git a/src/entities/Font/lib/dualFontLayout/index.ts b/src/entities/Font/domain/index.ts
similarity index 100%
rename from src/entities/Font/lib/dualFontLayout/index.ts
rename to src/entities/Font/domain/index.ts
diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index b441d65..fe5ee35 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -1,4 +1,5 @@
 export * from './api';
+export * from './domain';
 export * from './lib';
 export * from './model';
 export * from './ui';
diff --git a/src/entities/Font/lib/index.ts b/src/entities/Font/lib/index.ts
index 017b86e..161c396 100644
--- a/src/entities/Font/lib/index.ts
+++ b/src/entities/Font/lib/index.ts
@@ -1,5 +1,3 @@
-export * from './dualFontLayout';
-
 export { getFontUrl } from './getFontUrl/getFontUrl';
 
 // Mock data helpers for Storybook and testing
-- 
2.52.0


From b8edeff86f6cfba3d503cd40fabdc42c8089ef4c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 14:08:25 +0300
Subject: [PATCH 20/67] refactor(font): move test fixtures into a dedicated
 testing segment

Mock data lived in lib/ and was re-exported through the slice's
production index.ts, advertising fixtures as part of the public API.
Move it to a testing/ segment and drop it from index.ts; consumers now
import explicitly via the $entities/Font/testing subpath.

Repoints the four mock consumers (FontApplicator story, sizeResolver
and fontCatalogStore specs, comparisonStore test) to the new subpath.
---
 src/entities/Font/index.ts                    |  3 ++
 src/entities/Font/lib/index.ts                | 44 -------------------
 .../createFontRowSizeResolver.test.ts         |  2 +-
 .../fontCatalogStore.svelte.spec.ts           |  8 ++--
 .../{lib/mocks => testing}/filters.mock.ts    |  0
 .../Font/{lib/mocks => testing}/fonts.mock.ts |  4 +-
 .../Font/{lib/mocks => testing}/index.ts      |  2 +-
 .../{lib/mocks => testing}/stores.mock.ts     |  2 +-
 .../FontApplicator.stories.svelte             |  2 +-
 .../model/stores/comparisonStore.test.ts      |  2 +-
 10 files changed, 14 insertions(+), 55 deletions(-)
 rename src/entities/Font/{lib/mocks => testing}/filters.mock.ts (100%)
 rename src/entities/Font/{lib/mocks => testing}/fonts.mock.ts (98%)
 rename src/entities/Font/{lib/mocks => testing}/index.ts (97%)
 rename src/entities/Font/{lib/mocks => testing}/stores.mock.ts (99%)

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index fe5ee35..a7d69ad 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -3,3 +3,6 @@ export * from './domain';
 export * from './lib';
 export * from './model';
 export * from './ui';
+
+// `./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/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/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
index 07a4edb..912d1d6 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -1,3 +1,7 @@
+import {
+    generateMixedCategoryFonts,
+    generateMockFonts,
+} from '$entities/Font/testing';
 import { QueryClient } from '@tanstack/query-core';
 import { flushSync } from 'svelte';
 import {
@@ -12,10 +16,6 @@ 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';
 
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 98%
rename from src/entities/Font/lib/mocks/fonts.mock.ts
rename to src/entities/Font/testing/fonts.mock.ts
index a691dc7..344c554 100644
--- a/src/entities/Font/lib/mocks/fonts.mock.ts
+++ b/src/entities/Font/testing/fonts.mock.ts
@@ -16,7 +16,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 +28,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 97%
rename from src/entities/Font/lib/mocks/index.ts
rename to src/entities/Font/testing/index.ts
index a9d5e5d..20219f5 100644
--- a/src/entities/Font/lib/mocks/index.ts
+++ b/src/entities/Font/testing/index.ts
@@ -13,7 +13,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..cb10931 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' });
diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
index 0e370a6..c2f412a 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
@@ -23,7 +23,7 @@ const { Story } = defineMeta({
 </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' });
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 9227469..2f2c87e 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -10,7 +10,7 @@
  */
 
 import type { UnifiedFont } from '$entities/Font';
-import { UNIFIED_FONTS } from '$entities/Font/lib/mocks';
+import { UNIFIED_FONTS } from '$entities/Font/testing';
 import { queryClient } from '$shared/api/queryClient';
 import {
     beforeEach,
-- 
2.52.0


From 8adf5cd7b355ce8e602e7090bdb069dde2dce04d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 16:45:04 +0300
Subject: [PATCH 21/67] refactor(shared): ComboControl owns its NumericControl
 + ControlLabels contract

---
 .../ui/ComboControl/ComboControl.svelte       | 25 +++-----
 src/shared/ui/ComboControl/types.ts           | 60 +++++++++++++++++++
 src/shared/ui/index.ts                        | 10 ++++
 3 files changed, 77 insertions(+), 18 deletions(-)
 create mode 100644 src/shared/ui/ComboControl/types.ts

diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 778274e..35ae8fe 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -4,7 +4,6 @@
     that opens a vertical slider popover.
 -->
 <script lang="ts">
-import type { TypographyControl } from '$shared/lib';
 import { cn } from '$shared/lib';
 import { Slider } from '$shared/ui';
 import { Button } from '$shared/ui/Button';
@@ -12,12 +11,16 @@ import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
 import { Popover } from 'bits-ui';
 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
      */
@@ -31,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 {
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/index.ts b/src/shared/ui/index.ts
index d02efb3..78a508d 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
-- 
2.52.0


From 4640d6e521b0be69f29634a6e859c5e14b03d72b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 16:50:55 +0300
Subject: [PATCH 22/67] test(shared): test ComboControl against NumericControl
 mock, not the factory

---
 .../ComboControl/ComboControl.stories.svelte  |  6 +--
 .../ComboControl/ComboControl.svelte.test.ts  |  4 +-
 .../createNumericControlMock.svelte.ts        | 47 +++++++++++++++++++
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/shared/ui/ComboControl/testing/createNumericControlMock.svelte.ts

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.test.ts b/src/shared/ui/ComboControl/ComboControl.svelte.test.ts
index 8eade6a..6f069ec 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,
@@ -6,9 +5,10 @@ import {
     waitFor,
 } 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);
+        },
+    };
+}
-- 
2.52.0


From 7834c7cbf2dd376b1492ec851a251c5a8a6bfa22 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 16:52:37 +0300
Subject: [PATCH 23/67] refactor(AdjustTypography): add typography-control
 module (factory, types, constants)

---
 src/features/AdjustTypography/index.ts        |  3 +
 .../AdjustTypography/model/const/const.ts     | 76 +++++++++++++++++++
 src/features/AdjustTypography/model/index.ts  |  5 ++
 .../model/types/typography.ts                 | 27 +++++++
 .../createTypographyControl.svelte.ts         | 67 ++++++++++++++++
 .../createTypographyControl.test.ts           |  8 +-
 6 files changed, 181 insertions(+), 5 deletions(-)
 create mode 100644 src/features/AdjustTypography/model/const/const.ts
 create mode 100644 src/features/AdjustTypography/model/types/typography.ts
 create mode 100644 src/features/AdjustTypography/model/typographyControl/createTypographyControl.svelte.ts
 rename src/{shared/lib/helpers/createTypographyControl => features/AdjustTypography/model/typographyControl}/createTypographyControl.test.ts (98%)

diff --git a/src/features/AdjustTypography/index.ts b/src/features/AdjustTypography/index.ts
index da1afb9..2ff571d 100644
--- a/src/features/AdjustTypography/index.ts
+++ b/src/features/AdjustTypography/index.ts
@@ -1,5 +1,8 @@
 export {
     createTypographySettingsStore,
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
     type TypographySettingsStore,
     typographySettingsStore,
 } from './model';
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..4543ff8 100644
--- a/src/features/AdjustTypography/model/index.ts
+++ b/src/features/AdjustTypography/model/index.ts
@@ -1,3 +1,8 @@
+export {
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
+} from './const/const';
 export {
     createTypographySettingsStore,
     type 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,
-- 
2.52.0


From c613d4cf885d14fab2e38cd998856d7e83e0c2b1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:04:51 +0300
Subject: [PATCH 24/67] refactor(AdjustTypography): consume typography-control
 module from its new home

---
 .../typographySettingsStore.svelte.ts           | 17 +++++++++--------
 .../ui/TypographyMenu/TypographyMenu.svelte     | 12 ++++++------
 .../ui/SliderArea/SliderArea.svelte             | 10 ++++++----
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 58eabd9..7461b22 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -11,22 +11,23 @@
  */
 
 import {
-    type ControlId,
     DEFAULT_FONT_SIZE,
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
 } from '$entities/Font';
 import {
-    type ControlDataModel,
-    type ControlModel,
     type PersistentStore,
-    type TypographyControl,
     createPersistentStore,
-    createTypographyControl,
 } 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 +37,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 +46,7 @@ export interface Control extends ControlOnlyFields<ControlId> {
     /**
      * The reactive typography control instance
      */
-    instance: TypographyControl;
+    instance: NumericControl;
 }
 
 /**
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index 1e234dd..d5b7b2e 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 { Popover } from 'bits-ui';
 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,
+    typographySettingsStore,
+} from '../../model';
 
 interface Props {
     /**
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index d5af8ea..62a7cff 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -11,13 +11,15 @@
 import {
     type ComparisonResult,
     DualFontLayout,
+    findSplitIndex,
+} from '$entities/Font';
+import {
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
-    findSplitIndex,
-} from '$entities/Font';
-import { TypographyMenu } from '$features/AdjustTypography';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
+    TypographyMenu,
+    typographySettingsStore,
+} from '$features/AdjustTypography';
 import {
     type ResponsiveManager,
     debounce,
-- 
2.52.0


From e49148008bf836d40755dd2470772d746b439c2a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:08:48 +0300
Subject: [PATCH 25/67] refactor(Font): remove typography-control config, keep
 render defaults

---
 src/entities/Font/model/const/const.ts        | 57 -------------------
 src/entities/Font/model/types/index.ts        |  1 -
 src/entities/Font/model/types/typography.ts   |  1 -
 .../typographySettingsStore.test.ts           |  2 +-
 4 files changed, 1 insertion(+), 60 deletions(-)
 delete mode 100644 src/entities/Font/model/types/typography.ts

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/types/index.ts b/src/entities/Font/model/types/index.ts
index b23390c..fd43b4d 100644
--- a/src/entities/Font/model/types/index.ts
+++ b/src/entities/Font/model/types/index.ts
@@ -24,4 +24,3 @@ export type {
 } from './store';
 
 export * from './store/fontLifecycle';
-export * from './typography';
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/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
index 094bf75..5d99eb5 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
@@ -6,7 +6,6 @@ import {
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
 } from '$entities/Font';
 import {
     beforeEach,
@@ -15,6 +14,7 @@ import {
     it,
     vi,
 } from 'vitest';
+import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../../const/const';
 import {
     type TypographySettings,
     TypographySettingsStore,
-- 
2.52.0


From 907145c6552915d6d6b225e7292c3409d8a0696b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:08:55 +0300
Subject: [PATCH 26/67] refactor(shared): drop createTypographyControl from
 shared/lib

---
 .../createTypographyControl.svelte.ts         | 200 ------------------
 src/shared/lib/helpers/index.ts               |  26 +--
 src/shared/lib/index.ts                       |   4 -
 3 files changed, 1 insertion(+), 229 deletions(-)
 delete mode 100644 src/shared/lib/helpers/createTypographyControl/createTypographyControl.svelte.ts

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/index.ts b/src/shared/lib/helpers/index.ts
index 4422645..87b4cec 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -3,7 +3,6 @@
  *
  * 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
@@ -13,11 +12,10 @@
  *
  * @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 });
  * ```
  */
 
@@ -43,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
  */
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index c2eaef9..0e52af8 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,15 +5,12 @@
  */
 
 export {
-    type ControlDataModel,
-    type ControlModel,
     createDebouncedState,
     createEntityStore,
     createFilter,
     createPersistentStore,
     createPerspectiveManager,
     createResponsiveManager,
-    createTypographyControl,
     createVirtualizer,
     type Entity,
     type EntityStore,
@@ -24,7 +21,6 @@ export {
     type Property,
     type ResponsiveManager,
     responsiveManager,
-    type TypographyControl,
     type VirtualItem,
     type Virtualizer,
     type VirtualizerOptions,
-- 
2.52.0


From 4d8dcf52e0d83331d7d3d415c6e1dd8a9316fd40 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:33:06 +0300
Subject: [PATCH 27/67] refactor: move BaseQueryStore into separate directory,
 adjust exports/imports

---
 .../model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts    | 2 +-
 .../helpers/{ => BaseQueryStore}/BaseQueryStore.svelte.ts    | 0
 .../lib/helpers/{ => BaseQueryStore}/BaseQueryStore.test.ts  | 0
 src/shared/lib/helpers/index.ts                              | 5 +++++
 src/shared/lib/index.ts                                      | 1 +
 5 files changed, 7 insertions(+), 1 deletion(-)
 rename src/shared/lib/helpers/{ => BaseQueryStore}/BaseQueryStore.svelte.ts (100%)
 rename src/shared/lib/helpers/{ => BaseQueryStore}/BaseQueryStore.test.ts (100%)

diff --git a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
index 9b177a8..7285768 100644
--- a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
+++ b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
@@ -8,7 +8,7 @@ import {
 } 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';
+import { BaseQueryStore } from '$shared/lib';
 
 /**
  * Internal fetcher that seeds the cache and handles error wrapping.
diff --git a/src/shared/lib/helpers/BaseQueryStore.svelte.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
similarity index 100%
rename from src/shared/lib/helpers/BaseQueryStore.svelte.ts
rename to src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
diff --git a/src/shared/lib/helpers/BaseQueryStore.test.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
similarity index 100%
rename from src/shared/lib/helpers/BaseQueryStore.test.ts
rename to src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 87b4cec..3c3f723 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -136,3 +136,8 @@ export {
      */
     type PerspectiveManager,
 } from './createPerspectiveManager/createPerspectiveManager.svelte';
+
+/**
+ * Base Query store using Tanstack query
+ */
+export { BaseQueryStore } from './BaseQueryStore/BaseQueryStore.svelte';
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 0e52af8..75b6dcc 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,6 +5,7 @@
  */
 
 export {
+    BaseQueryStore,
     createDebouncedState,
     createEntityStore,
     createFilter,
-- 
2.52.0


From a651d3d16f5ef58f372c3efaa1f49be78f2388ed Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:49:59 +0300
Subject: [PATCH 28/67] refactor(font): absorb FetchFontsByIds store into Font
 entity

FetchFontsByIds was data-access for the Font aggregate wearing a feature
costume: a single FontsByIdsStore (BaseQueryStore over Font's proxy API),
no UI, consumed only by comparisonStore. Move it beside fontCatalogStore
in the Font entity, collapse its deep $entities/Font imports to relative
paths, expose via the Font public API, and delete the feature slice.
---
 .../store/fontsByIdsStore/fontsByIdsStore.svelte.ts    | 10 +++++-----
 .../store/fontsByIdsStore/fontsByIdsStore.test.ts      | 10 +++++-----
 src/entities/Font/model/store/index.ts                 |  3 +++
 src/features/FetchFontsByIds/index.ts                  |  1 -
 src/features/FetchFontsByIds/model/index.ts            |  1 -
 .../model/stores/comparisonStore.svelte.ts             |  2 +-
 6 files changed, 14 insertions(+), 13 deletions(-)
 rename src/{features/FetchFontsByIds => entities/Font}/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts (93%)
 rename src/{features/FetchFontsByIds => entities/Font}/model/store/fontsByIdsStore/fontsByIdsStore.test.ts (97%)
 delete mode 100644 src/features/FetchFontsByIds/index.ts
 delete mode 100644 src/features/FetchFontsByIds/model/index.ts

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 7285768..a2cb585 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';
 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';
+} 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 97%
rename from src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
rename to src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
index 7849535..0acf5a9 100644
--- a/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
+++ b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
@@ -1,8 +1,3 @@
-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 { fontKeys } from '$shared/api/queryKeys';
 import {
@@ -12,6 +7,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..52dda36 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -7,3 +7,6 @@ export {
     FontCatalogStore,
     fontCatalogStore,
 } from './fontCatalogStore/fontCatalogStore.svelte';
+
+// Batch fetch by IDs (detail-cache seeding)
+export { FontsByIdsStore } from './fontsByIdsStore/fontsByIdsStore.svelte';
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/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index f43cce4..54b6ab3 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -15,13 +15,13 @@
 
 import {
     type FontLoadRequestConfig,
+    FontsByIdsStore,
     type UnifiedFont,
     fontCatalogStore,
     fontLifecycleManager,
     getFontUrl,
 } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
-import { FontsByIdsStore } from '$features/FetchFontsByIds';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
-- 
2.52.0


From 6888f67f14621c1d8efb36f05dbb6f06163f445d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 17:51:34 +0300
Subject: [PATCH 29/67] test(Font): make queryClient mock factory
 self-contained

The vi.mock factory referenced the top-level QueryClient import. Once
BaseQueryStore landed in the $shared/lib barrel, importing that barrel
for createFilter eagerly pulled @tanstack/query-core into the init
cycle, so the hoisted factory hit the import before initialization
(Cannot access '__vi_import_2__' before initialization). Import
QueryClient inside the factory to keep it independent of module order.
---
 .../fontCatalogStore/fontCatalogStore.svelte.spec.ts      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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 912d1d6..230512e 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -2,7 +2,6 @@ import {
     generateMixedCategoryFonts,
     generateMockFonts,
 } from '$entities/Font/testing';
-import { QueryClient } from '@tanstack/query-core';
 import { flushSync } from 'svelte';
 import {
     afterEach,
@@ -20,6 +19,13 @@ 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')>();
     return {
         ...actual,
-- 
2.52.0


From c72b51b1c74377601dbd6b9f45f3364dc8d86a21 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 19:16:44 +0300
Subject: [PATCH 30/67] refactor(shared): keep BaseQueryStore out of the lib
 barrels

BaseQueryStore pulls @tanstack/query-core. Re-exporting it through the
broad $shared/lib and $shared/lib/helpers barrels made every consumer of
those barrels eager-load TanStack at module-eval time (no tree-shaking in
vitest/vite-node), which is what surfaced the queryClient mock init-order
failure. Its single consumer now imports it by path.
---
 .../model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts  | 2 +-
 src/shared/lib/helpers/index.ts                            | 7 ++++---
 src/shared/lib/index.ts                                    | 1 -
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
index a2cb585..4c83b83 100644
--- a/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
+++ b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
@@ -1,5 +1,5 @@
 import { fontKeys } from '$shared/api/queryKeys';
-import { BaseQueryStore } from '$shared/lib';
+import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte';
 import {
     fetchFontsByIds,
     seedFontCache,
diff --git a/src/shared/lib/helpers/index.ts b/src/shared/lib/helpers/index.ts
index 3c3f723..bba4aa4 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -137,7 +137,8 @@ export {
     type PerspectiveManager,
 } from './createPerspectiveManager/createPerspectiveManager.svelte';
 
-/**
- * Base Query store using Tanstack query
+/*
+ * 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.
  */
-export { BaseQueryStore } from './BaseQueryStore/BaseQueryStore.svelte';
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 75b6dcc..0e52af8 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -5,7 +5,6 @@
  */
 
 export {
-    BaseQueryStore,
     createDebouncedState,
     createEntityStore,
     createFilter,
-- 
2.52.0


From 42bcc915c74e7a08f30b9247e2dff3796400ad61 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 19:16:44 +0300
Subject: [PATCH 31/67] chore(lint): enable import/no-cycle

Guards against circular-dependency regressions in barrels. Requires the
import plugin, which is not enabled by default.
---
 oxlint.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/oxlint.json b/oxlint.json
index 5d0d57b..ab5c55e 100644
--- a/oxlint.json
+++ b/oxlint.json
@@ -1,4 +1,5 @@
 {
+  "plugins": ["import"],
   "categories": {
     "correctness": "error",
     "suspicious": "warn",
@@ -22,6 +23,7 @@
   "rules": {
     "no-console": "off",
     "no-debugger": "error",
-    "no-alert": "warn"
+    "no-alert": "warn",
+    "import/no-cycle": "error"
   }
 }
-- 
2.52.0


From 36673597f7ffcd2764f8c6b89fff30ae97ffe96f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 19:30:56 +0300
Subject: [PATCH 32/67] refactor(breadcrumb): relocate Breadcrumb slice from
 entities to features
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Breadcrumb is not a business aggregate — it is a scroll-tracking navigation
capability (NavigationWrapper registers page sections into a store), so it
belongs in the features layer, not entities. Move the whole slice and
repoint its three widget consumers. entities/ now holds only Font, a true
aggregate.
---
 src/{entities => features}/Breadcrumb/index.ts                  | 2 +-
 src/{entities => features}/Breadcrumb/model/index.ts            | 0
 .../Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts     | 2 +-
 .../Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts       | 0
 src/{entities => features}/Breadcrumb/model/types/types.ts      | 0
 .../ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte         | 0
 .../Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte      | 0
 .../ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts         | 0
 .../ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte           | 0
 .../ui/NavigationWrapper/NavigationWrapper.stories.svelte       | 0
 .../Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte    | 0
 src/{entities => features}/Breadcrumb/ui/index.ts               | 0
 .../ComparisonView/ui/ComparisonView/ComparisonView.svelte      | 2 +-
 .../FontSearch/ui/FontSearchSection/FontSearchSection.svelte    | 2 +-
 .../SampleList/ui/SampleListSection/SampleListSection.svelte    | 2 +-
 15 files changed, 5 insertions(+), 5 deletions(-)
 rename src/{entities => features}/Breadcrumb/index.ts (91%)
 rename src/{entities => features}/Breadcrumb/model/index.ts (100%)
 rename src/{entities => features}/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts (99%)
 rename src/{entities => features}/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts (100%)
 rename src/{entities => features}/Breadcrumb/model/types/types.ts (100%)
 rename src/{entities => features}/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.stories.svelte (100%)
 rename src/{entities => features}/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte (100%)
 rename src/{entities => features}/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte.test.ts (100%)
 rename src/{entities => features}/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte (100%)
 rename src/{entities => features}/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.stories.svelte (100%)
 rename src/{entities => features}/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte (100%)
 rename src/{entities => features}/Breadcrumb/ui/index.ts (100%)

diff --git a/src/entities/Breadcrumb/index.ts b/src/features/Breadcrumb/index.ts
similarity index 91%
rename from src/entities/Breadcrumb/index.ts
rename to src/features/Breadcrumb/index.ts
index 4faa8d4..882b16e 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(() => {
diff --git a/src/entities/Breadcrumb/model/index.ts b/src/features/Breadcrumb/model/index.ts
similarity index 100%
rename from src/entities/Breadcrumb/model/index.ts
rename to src/features/Breadcrumb/model/index.ts
diff --git a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
similarity index 99%
rename from src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
rename to src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
index b72e3bd..74badbe 100644
--- a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
+++ b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
@@ -15,7 +15,7 @@
  * @example
  * ```svelte
  * <script lang="ts">
- *   import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
+ *   import { scrollBreadcrumbsStore } from '$features/Breadcrumb';
  *
  *   onMount(() => {
  *     scrollBreadcrumbsStore.add({
diff --git a/src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
similarity index 100%
rename from src/entities/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
rename to src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
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 100%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
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 100%
rename from src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
rename to src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
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 100%
rename from src/entities/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
rename to src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
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/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/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/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index f926be3..2ce0825 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 { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import {
-- 
2.52.0


From a9f3b990abadc5edd86eeb5b95249afde9b5c084 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 20:06:22 +0300
Subject: [PATCH 33/67] chore: declare sideEffects allowlist for tree-shaking

Without the field, Rollup treats every module as potentially side-effectful
and cannot drop unused re-exports pulled through barrels. Audited all
import-time side effects: only CSS and the two bare side-effect imports
(router.ts, bindings.svelte.ts) must be preserved; module-level store
singletons ride their export usage and need no listing. Trims the bundle
~8 KB raw / ~2.4 KB gzip.
---
 package.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/package.json b/package.json
index ef02d67..b4d5c7a 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,11 @@
   "version": "0.0.1",
   "packageManager": "yarn@4.11.0",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "**/router.ts",
+    "**/bindings.svelte.ts"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-- 
2.52.0


From 17c022470eaa0d0a123575096b3af8bad3a12beb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 20:06:33 +0300
Subject: [PATCH 34/67] refactor(font): expose stores via model segment, not
 the top barrel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Re-exporting the store singletons (fontCatalogStore, fontLifecycleManager,
FontsByIdsStore) through entities/Font/index.ts meant every consumer of the
barrel eager-instantiated stores and pulled @tanstack/query-core — in dev,
test, and as retained code. Drop the store re-export from the top barrel;
keep the pure surface (types, constants, domain, lib, ui) there for
convenience. Consumers that need stores import $entities/Font/model.
Aligns with the BaseQueryStore carve-out: barrel by default, segment path
when it would drag a heavy or side-effectful dependency.
---
 src/entities/Font/index.ts                        | 15 ++++++++++++++-
 .../model/store/bindings.svelte.ts                |  2 +-
 .../model/stores/comparisonStore.svelte.ts        |  8 +++++---
 .../model/stores/comparisonStore.test.ts          | 15 ++++++++++++---
 .../ComparisonView/ui/FontList/FontList.svelte    |  4 +++-
 .../SampleList/ui/SampleList/SampleList.svelte    |  4 +++-
 .../ui/SampleListSection/SampleListSection.svelte |  2 +-
 7 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index a7d69ad..938ecb0 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -1,8 +1,21 @@
 export * from './api';
 export * from './domain';
 export * from './lib';
-export * from './model';
 export * from './ui';
 
+// Pure model surface (types + constants) is part of the convenient top-level
+// API. Stateful stores are deliberately excluded — see below.
+export * from './model/const/const';
+export * from './model/types';
+
+/*
+ * Stores (`fontCatalogStore`, `fontLifecycleManager`, `FontsByIdsStore`) are
+ * intentionally NOT re-exported here. They instantiate module-level singletons
+ * and pull `@tanstack/query-core`, so funneling them through this barrel would
+ * make every consumer of `$entities/Font` eager-instantiate stores (and break
+ * tree-shaking / test init-order). Import them via the model segment:
+ *   import { fontCatalogStore } from '$entities/Font/model';
+ */
+
 // `./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/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index 417fc3e..4191533 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -9,7 +9,7 @@
  * observer, so it lives at module scope, not in any individual widget.
  */
 
-import { fontCatalogStore } from '$entities/Font';
+import { fontCatalogStore } from '$entities/Font/model';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
 import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 54b6ab3..2562cf3 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -15,12 +15,14 @@
 
 import {
     type FontLoadRequestConfig,
-    FontsByIdsStore,
     type UnifiedFont,
-    fontCatalogStore,
-    fontLifecycleManager,
     getFontUrl,
 } from '$entities/Font';
+import {
+    FontsByIdsStore,
+    fontCatalogStore,
+    fontLifecycleManager,
+} from '$entities/Font/model';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 2f2c87e..4f04d48 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -53,6 +53,16 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
 
 vi.mock('$entities/Font', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font')>();
+    return {
+        ...actual,
+        getFontUrl: vi.fn(() => 'https://example.com/font.woff2'),
+    };
+});
+
+// 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,
         fontCatalogStore: { fonts: [] },
@@ -63,7 +73,6 @@ vi.mock('$entities/Font', async importOriginal => {
             getFontStatus: vi.fn(),
             ready: vi.fn(() => Promise.resolve()),
         },
-        getFontUrl: vi.fn(() => 'https://example.com/font.woff2'),
     };
 });
 
@@ -84,11 +93,11 @@ vi.mock('$features/AdjustTypography/model', () => ({
     },
 }));
 
+import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
 import {
     fontCatalogStore,
     fontLifecycleManager,
-} from '$entities/Font';
-import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
+} from '$entities/Font/model';
 import { ComparisonStore } from './comparisonStore.svelte';
 
 describe('ComparisonStore', () => {
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 4659390..9733f20 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -9,9 +9,11 @@ import {
     FontVirtualList,
     type UnifiedFont,
     VIRTUAL_INDEX_NOT_LOADED,
+} from '$entities/Font';
+import {
     fontCatalogStore,
     fontLifecycleManager,
-} from '$entities/Font';
+} from '$entities/Font/model';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
     Button,
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 2d37b8a..22611e5 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -8,9 +8,11 @@
 import {
     FontVirtualList,
     createFontRowSizeResolver,
+} from '$entities/Font';
+import {
     fontCatalogStore,
     fontLifecycleManager,
-} from '$entities/Font';
+} from '$entities/Font/model';
 import {
     TypographyMenu,
     typographySettingsStore,
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index 2ce0825..91b8a6b 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -3,7 +3,7 @@
     Wraps SampleList with a Section component
 -->
 <script lang="ts">
-import { fontCatalogStore } from '$entities/Font';
+import { fontCatalogStore } from '$entities/Font/model';
 import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
-- 
2.52.0


From 28a8e4991586daa54671b5361faac1b29930b03b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 11:49:53 +0300
Subject: [PATCH 35/67] refactor(font): keep @tanstack out of the entity public
 API barrel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract NonRetryableError into its own tanstack-free module and drop the
./api re-export from the Font slice barrel. Importing $entities/Font no
longer transitively loads @tanstack/query-core or constructs the QueryClient
singleton via the ./api and ./lib (errors) chains — light consumers (domain,
types, consts) and unit specs stop paying for TanStack.

Note: ./ui still pulls the stores; addressed separately.
---
 src/entities/Font/index.ts                         | 11 ++++++++++-
 src/entities/Font/lib/errors/errors.ts             |  2 +-
 .../FilterAndSortFonts/api/filters/filters.ts      |  2 +-
 src/shared/api/nonRetryableError.ts                | 14 ++++++++++++++
 src/shared/api/queryClient.ts                      | 11 +----------
 5 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/shared/api/nonRetryableError.ts

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index 938ecb0..d25188a 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -1,4 +1,3 @@
-export * from './api';
 export * from './domain';
 export * from './lib';
 export * from './ui';
@@ -8,6 +7,16 @@ export * from './ui';
 export * from './model/const/const';
 export * from './model/types';
 
+/*
+ * `./api` (proxy clients: `fetchProxyFonts`, `seedFontCache`, …) is intentionally
+ * NOT re-exported here. Those clients import `$shared/api/queryClient`, whose
+ * module eval runs `new QueryClient()` and loads `@tanstack/query-core`. Funneling
+ * them through this barrel made every consumer of `$entities/Font` — including
+ * pure-domain and type-only importers — eager-load TanStack and construct the
+ * client (notably in unit specs). Import API clients via the segment:
+ *   import { fetchProxyFonts } from '$entities/Font/api';
+ */
+
 /*
  * Stores (`fontCatalogStore`, `fontLifecycleManager`, `FontsByIdsStore`) are
  * intentionally NOT re-exported here. They instantiate module-level singletons
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/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/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..1e921e5 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
-- 
2.52.0


From fcd61be4faaa1005d0aeee5b4830d26362bc9f54 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 12:06:30 +0300
Subject: [PATCH 36/67] refactor(font): inject font-load status as a prop,
 decoupling UI from the store

FontApplicator and FontSampler no longer read fontLifecycleManager. They take a
`status` prop (FontLoadStatus | undefined) supplied by the composing widget;
FontList and SampleList resolve status once per visible row and pass it down.

FSD+ dependency inversion: the entity/feature UI depends on a value, not the
lifecycle store. Removes FontApplicator's value-import of the store (one step
toward an inert ./ui barrel) and drops the duplicate getFontStatus read per row
in FontList. FontSampler is now status-decoupled and trivially relocatable to
entities/Font/ui.
---
 .../FontApplicator.stories.svelte             | 18 ++++++------
 .../ui/FontApplicator/FontApplicator.svelte   | 28 ++++++++-----------
 .../ui/FontSampler/FontSampler.stories.svelte |  7 +++++
 .../ui/FontSampler/FontSampler.svelte         | 11 ++++++--
 .../ui/FontList/FontList.svelte               | 26 ++++++-----------
 .../ui/SampleList/SampleList.svelte           |  8 +++++-
 6 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
index c2f412a..92bb034 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
@@ -10,14 +10,14 @@ 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>
@@ -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/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
index ffc2a3f..0a5dadb 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
@@ -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)',
@@ -85,6 +90,7 @@ const mockGeorgia: UnifiedFont = {
     name="Default"
     args={{
         font: mockArial,
+        status: 'loaded',
         text: 'The quick brown fox jumps over the lazy dog',
         index: 0,
     }}
@@ -101,6 +107,7 @@ 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,
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 614301b..b214ea1 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -6,6 +6,7 @@
 <script lang="ts">
 import {
     FontApplicator,
+    type FontLoadStatus,
     type UnifiedFont,
 } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -23,6 +24,12 @@ 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
      */
@@ -34,7 +41,7 @@ interface Props {
     index?: number;
 }
 
-let { font, text = $bindable(), index = 0 }: Props = $props();
+let { font, status, 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 ?? '');
@@ -132,7 +139,7 @@ const stats = $derived([
 
     <!-- ── Main content area ──────────────────────────────────────────── -->
     <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
-        <FontApplicator {font} weight={typographySettingsStore.weight}>
+        <FontApplicator {font} {status}>
             <ContentEditable
                 bind:text
                 fontSize={typographySettingsStore.renderedSize}
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 9733f20..2cd5eca 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -75,21 +75,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">
@@ -129,8 +114,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 }}
@@ -155,7 +147,7 @@ function isFontReady(font: UnifiedFont): boolean {
                                 class="h-full"
                                 iconPosition="right"
                             >
-                                <FontApplicator {font}>
+                                <FontApplicator {font} {status}>
                                     {font.name}
                                 </FontApplicator>
 
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 22611e5..26f3347 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -113,7 +113,13 @@ const fontRowHeight = $derived.by(() =>
         {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} />
         {/snippet}
     </FontVirtualList>
 
-- 
2.52.0


From 39d1ce4c372ec029d9f1e61e078ef72fb86de8ba Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 16:49:59 +0300
Subject: [PATCH 37/67] refactor(FontSampler): remove $derived, since props are
 already reactive

---
 src/features/DisplayFont/ui/FontSampler/FontSampler.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index b214ea1..84ba0f6 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -43,9 +43,6 @@ interface Props {
 
 let { font, status, 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 ?? '');
-
 // Extract provider badge with fallback
 const providerBadge = $derived(
     font.providerBadge
@@ -98,9 +95,9 @@ const stats = $derived([
                 {font.name}
             </span>
 
-            {#if fontType}
+            {#if font?.category}
                 <Badge size="xs" variant="default" nowrap>
-                    {fontType}
+                    {font?.category}
                 </Badge>
             {/if}
 
-- 
2.52.0


From 10603d18bf87dd68937d7e00d4c5dd9ae05025ba Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 17:24:55 +0300
Subject: [PATCH 38/67] refactor(font): replace fontCatalogStore singleton with
 lazy getFontCatalog

Swap the eagerly-constructed fontCatalogStore singleton for a lazy
getFontCatalog() accessor (plus __resetFontCatalog for tests), so the
InfiniteQueryObserver is created on first use rather than at module load.
Update the model barrels and all consumers (FontVirtualList, SampleList,
SampleListSection) to the accessor.

Also extract createFontLoadRequestConfig from FontVirtualList: it resolves a
font's URL for a weight and returns a 0-or-1 element array, letting callers
flatMap over a list to build load requests and drop unresolvable fonts in one
pass.
---
 .../createFontLoadRequestContfig.test.ts      | 111 ++++++++++++++++++
 .../createFontLoadRequestContfig.ts           |  33 ++++++
 src/entities/Font/model/index.ts              |   3 +
 .../fontCatalogStore.svelte.ts                |  12 +-
 src/entities/Font/model/store/index.ts        |   8 +-
 .../ui/FontVirtualList/FontVirtualList.svelte |  63 +++++-----
 .../ui/SampleList/SampleList.svelte           |  16 ++-
 .../SampleListSection.svelte                  |   7 +-
 8 files changed, 204 insertions(+), 49 deletions(-)
 create mode 100644 src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.test.ts
 create mode 100644 src/entities/Font/lib/createFontLoadRequestContfig/createFontLoadRequestContfig.ts

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/model/index.ts b/src/entities/Font/model/index.ts
index 8749b29..36cbda2 100644
--- a/src/entities/Font/model/index.ts
+++ b/src/entities/Font/model/index.ts
@@ -1,3 +1,6 @@
 export * from './const/const';
+
+export { getFontCatalog } from './store';
+
 export * from './store';
 export * from './types';
diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
index c6d7510..72b3d56 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -483,8 +483,14 @@ export class FontCatalogStore {
     }
 }
 
-export function createFontCatalogStore(params: FontStoreParams = {}): FontCatalogStore {
-    return new FontCatalogStore(params);
+let _catalog: FontCatalogStore | undefined;
+
+export function getFontCatalog(): FontCatalogStore {
+    return (_catalog ??= new FontCatalogStore({ limit: 50 }));
 }
 
-export const fontCatalogStore = new FontCatalogStore({ limit: 50 });
+// test-only reset, so specs don't share a live observer
+export function __resetFontCatalog() {
+    _catalog?.destroy();
+    _catalog = undefined;
+}
diff --git a/src/entities/Font/model/store/index.ts b/src/entities/Font/model/store/index.ts
index 52dda36..d0d0024 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -2,11 +2,9 @@
 export * 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/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 0d21abe..bb71dd8 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,
 } from '../../model';
 
 interface Props extends
@@ -55,17 +52,27 @@ let {
     ...rest
 }: Props = $props();
 
-const isLoading = $derived(
-    fontCatalogStore.isFetching || fontCatalogStore.isLoading,
-);
+const fontCatalog = getFontCatalog();
+
+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 +86,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 +112,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 +138,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 +152,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 +174,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/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 26f3347..fa9861f 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -10,8 +10,8 @@ import {
     createFontRowSizeResolver,
 } from '$entities/Font';
 import {
-    fontCatalogStore,
     fontLifecycleManager,
+    getFontCatalog,
 } from '$entities/Font/model';
 import {
     TypographyMenu,
@@ -22,6 +22,8 @@ import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
 import { layoutManager } from '../../model';
 
+const fontCatalog = getFontCatalog();
+
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
 // Only the header is counted; the mobile footer (md:hidden) is excluded because
@@ -44,14 +46,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) {
@@ -69,7 +73,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,
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index 91b8a6b..fe312a4 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -3,7 +3,7 @@
     Wraps SampleList with a Section component
 -->
 <script lang="ts">
-import { fontCatalogStore } from '$entities/Font/model';
+import { getFontCatalog } from '$entities/Font/model';
 import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
@@ -26,6 +26,9 @@ interface Props {
 const { index }: Props = $props();
 
 const responsive = getContext<ResponsiveManager>('responsive');
+
+const fontCatalog = getFontCatalog();
+const total = $derived<number>(fontCatalog?.pagination?.total);
 </script>
 
 <NavigationWrapper index={2} title="Samples">
@@ -36,7 +39,7 @@ 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()}
-- 
2.52.0


From 1ad015aed6359927a9696432fb44707b6dce4156 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 17:25:05 +0300
Subject: [PATCH 39/67] refactor(comparison): replace comparisonStore singleton
 with lazy getComparisonStore

Mirror the font-catalog change in ComparisonView: expose getComparisonStore()
(plus __resetComparisonStore for tests) instead of an eager comparisonStore
singleton, and consume getFontCatalog() internally. Update the model barrel and
all UI consumers (Sidebar, FontList, Header, Line, SliderArea); Character no
longer needs the store and reads everything from props.

Update both specs to the accessor: comparisonStore.test mocks getFontCatalog
with a writable stub (the real store's fonts is getter-only) and resets the
catalog between cases; Sidebar.svelte.test resolves the store via the accessor.

Also document Character's props.
---
 src/widgets/ComparisonView/model/index.ts     |  7 ++-
 .../model/stores/comparisonStore.svelte.ts    | 23 +++++++---
 .../model/stores/comparisonStore.test.ts      | 20 ++++++---
 .../ui/Character/Character.svelte             | 20 ++++++---
 .../ui/FontList/FontList.svelte               | 12 +++--
 .../ComparisonView/ui/Header/Header.svelte    |  4 +-
 .../ComparisonView/ui/Line/Line.svelte        | 44 ++++++++++---------
 .../ComparisonView/ui/Sidebar/Sidebar.svelte  | 13 +++---
 .../ui/Sidebar/Sidebar.svelte.test.ts         | 15 ++++++-
 .../ui/SliderArea/SliderArea.svelte           |  4 +-
 10 files changed, 107 insertions(+), 55 deletions(-)

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 2562cf3..b4b616a 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -19,9 +19,10 @@ import {
     getFontUrl,
 } from '$entities/Font';
 import {
+    type FontCatalogStore,
     FontsByIdsStore,
-    fontCatalogStore,
     fontLifecycleManager,
+    getFontCatalog,
 } from '$entities/Font/model';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
 import { createPersistentStore } from '$shared/lib';
@@ -98,10 +99,13 @@ export class ComparisonStore {
      */
     #fontsByIdsStore: FontsByIdsStore;
 
+    #fontCatalog: FontCatalogStore;
+
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
         const { fontAId, fontBId } = storage.value;
         this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
+        this.#fontCatalog = getFontCatalog();
 
         $effect.root(() => {
             // Sync batch results → fontA / fontB
@@ -173,7 +177,7 @@ export class ComparisonStore {
                     return;
                 }
 
-                const fonts = fontCatalogStore.fonts;
+                const fonts = this.#fontCatalog.fonts;
 
                 if (fonts.length < 2) {
                     return;
@@ -356,7 +360,14 @@ export class ComparisonStore {
     }
 }
 
-/**
- * Singleton comparison store instance
- */
-export const comparisonStore = new ComparisonStore();
+let _comparisonStore: ComparisonStore | undefined;
+
+export function getComparisonStore(): ComparisonStore {
+    return (_comparisonStore ??= new ComparisonStore());
+}
+
+// test-only reset, so specs don't share a live observer
+export function __resetComparisonStore() {
+    _comparisonStore?.resetAll();
+    _comparisonStore = undefined;
+}
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 4f04d48..1aa0240 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -47,6 +47,10 @@ const mockStorage = vi.hoisted(() => {
     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),
 }));
@@ -65,7 +69,7 @@ vi.mock('$entities/Font/model', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font/model')>();
     return {
         ...actual,
-        fontCatalogStore: { fonts: [] },
+        getFontCatalog: () => mockFontCatalog,
         fontLifecycleManager: {
             touch: vi.fn(),
             pin: vi.fn(),
@@ -95,21 +99,23 @@ vi.mock('$features/AdjustTypography/model', () => ({
 
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
 import {
-    fontCatalogStore,
     fontLifecycleManager,
+    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([]);
@@ -126,6 +132,10 @@ describe('ComparisonStore', () => {
         });
     });
 
+    afterEach(() => {
+        __resetFontCatalog();
+    });
+
     describe('Initialization', () => {
         it('should create store with initial empty state', () => {
             const store = new ComparisonStore();
@@ -164,7 +174,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();
@@ -192,7 +202,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(
diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index 9ae91a6..ddb69a8 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -7,16 +7,25 @@
     the Line container zeroes font-size to collapse inter-element whitespace.
 -->
 <script lang="ts">
+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;
     /**
-     * Past state
+     * Font shown when `isPast` is true (the "before" side of the comparison).
+     */
+    fontA: UnifiedFont;
+    /**
+     * 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;
     /**
@@ -26,10 +35,7 @@ interface Props {
     fontSize: number;
 }
 
-let { char, isPast, fontSize }: Props = $props();
-
-const fontA = $derived(comparisonStore.fontA);
-const fontB = $derived(comparisonStore.fontB);
+let { char, fontA, fontB, isPast, fontSize }: Props = $props();
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 2cd5eca..cc8de36 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -11,8 +11,8 @@ import {
     VIRTUAL_INDEX_NOT_LOADED,
 } from '$entities/Font';
 import {
-    fontCatalogStore,
     fontLifecycleManager,
+    getFontCatalog,
 } from '$entities/Font/model';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
@@ -28,17 +28,21 @@ import {
 } from '../../lib';
 import {
     type Side,
-    comparisonStore,
+    getComparisonStore,
 } from '../../model';
 
-const side = $derived(comparisonStore.side);
+const fontCatalog = getFontCatalog();
+const comparisonStore = getComparisonStore();
+
+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;
     }
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 612d230..e25c30f 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -12,7 +12,7 @@ import {
     computeLineRenderModel,
 } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography';
-import { comparisonStore } from '../../model';
+import { getComparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 
 interface Props {
@@ -32,6 +32,8 @@ interface Props {
 
 let { line, split, windowSize }: Props = $props();
 
+const comparisonStore = getComparisonStore();
+
 const model = $derived(computeLineRenderModel(line, split, windowSize));
 
 const typography = $derived(typographySettingsStore);
@@ -80,22 +82,24 @@ const strutStyle = $derived(
     would show as gaps under `white-space: pre`; children restore their size.
     Letter-spacing is px because em would resolve against that zero.
 -->
-<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} isPast={wc.isPast} fontSize={fontSizePx} />
-    {/each}
-    {#if model.rightText}
-        <span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
-    {/if}
-</div>
+{#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/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index 895b4d5..74b1661 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
@@ -71,9 +74,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 +86,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>
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 62a7cff..b3a62d8 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -33,7 +33,7 @@ import {
     ensureCanvasFonts,
     getPretextFontString,
 } from '../../lib';
-import { comparisonStore } from '../../model';
+import { getComparisonStore } from '../../model';
 import Line from '../Line/Line.svelte';
 import Thumb from '../Thumb/Thumb.svelte';
 
@@ -51,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.
-- 
2.52.0


From 9780ff9358fa9c74f5be8636fbfa708ef96409a9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 17:25:26 +0300
Subject: [PATCH 40/67] refactor(filters): mount-scope store bindings and fix
 effect-update loop

Replace the side-effect-on-import $effect.root in bindings with an explicit
startFilterBindings() started from an AppBindings provider in onMount, so the
filters/sort -> font-catalog bridge has a lifecycle tied to the app tree and a
returned cleanup. bindings now consumes getFontCatalog().

Fix the effect-update loop this surfaced: setGroups populated the reactive
groups array in place via `groups.length = 0; groups.push(...)`. push reads the
array's length signal, so the populating effect both read and wrote
groups.length each run and re-triggered itself forever
(effect_update_depth_exceeded). setGroups now reassigns the array (groups is
`let`), which does not read length.

Extract mapFilterMetadataToGroups to own the metadata -> group-config mapping,
including sorting a copy of options (the source is TanStack-cached data; an
in-place sort corrupts the cache and writes into the effect's read dependency).
---
 src/app/App.svelte                            | 13 ++-
 src/app/providers/AppBindings.svelte          | 24 ++++++
 src/app/providers/index.ts                    |  1 +
 src/features/FilterAndSortFonts/index.ts      | 10 ++-
 .../mapper/mapFilterMetadataToGroups.test.ts  | 83 +++++++++++++++++++
 .../lib/mapper/mapFilterMetadataToGroups.ts   | 36 ++++++++
 .../FilterAndSortFonts/model/index.ts         |  2 +-
 .../appliedFilterStore.svelte.ts              | 22 ++---
 .../model/store/bindings.svelte.ts            | 58 ++++---------
 9 files changed, 191 insertions(+), 58 deletions(-)
 create mode 100644 src/app/providers/AppBindings.svelte
 create mode 100644 src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.test.ts
 create mode 100644 src/features/FilterAndSortFonts/lib/mapper/mapFilterMetadataToGroups.ts

diff --git a/src/app/App.svelte b/src/app/App.svelte
index 6f9fccc..ad5a97e 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -16,12 +16,17 @@
  */
 import '$routes/router';
 import { Router } from 'sv-router';
-import { QueryProvider } from './providers';
+import {
+    AppBindingsProvider,
+    QueryProvider,
+} from './providers';
 import Layout from './ui/Layout.svelte';
 </script>
 
 <QueryProvider>
-    <Layout>
-        <Router />
-    </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/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/features/FilterAndSortFonts/index.ts b/src/features/FilterAndSortFonts/index.ts
index bd666a3..c76c3c2 100644
--- a/src/features/FilterAndSortFonts/index.ts
+++ b/src/features/FilterAndSortFonts/index.ts
@@ -1,7 +1,6 @@
 export { mapAppliedFiltersToParams } from './lib';
 
 export {
-    type AppliedFilterStore,
     appliedFilterStore,
     /**
      * Filter Store
@@ -16,9 +15,14 @@ export {
      */
     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..49ad32a 100644
--- a/src/features/FilterAndSortFonts/model/index.ts
+++ b/src/features/FilterAndSortFonts/model/index.ts
@@ -41,7 +41,7 @@ export {
  * 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
diff --git a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
index f2e8258..11a65cc 100644
--- a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
@@ -42,8 +42,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 +67,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)
diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index 4191533..537d5d8 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -9,52 +9,30 @@
  * observer, so it lives at module scope, not in any individual widget.
  */
 
-import { fontCatalogStore } from '$entities/Font/model';
+import { getFontCatalog } from '$entities/Font/model';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
+import { mapFilterMetadataToGroups } from '../../lib/mapper/mapFilterMetadataToGroups';
 import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
 import { availableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
 import { sortStore } 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 stop = $effect.root(() => {
+        $effect(() => {
+            const dynamicFilters = availableFilterStore.filters;
+            if (dynamicFilters.length > 0) {
+                appliedFilterStore.setGroups(mapFilterMetadataToGroups(dynamicFilters));
+            }
+        });
 
-        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,
-                    })),
-                })),
-            );
-        }
+        $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
+}
-- 
2.52.0


From 0b675635b394e77a1c7b979ec87ad8fd81af5721 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 18:37:18 +0300
Subject: [PATCH 41/67] refactor(filters): replace filter/sort store singletons
 with lazy accessors

Convert appliedFilterStore, availableFilterStore and sortStore from eager
module-level singletons to getAppliedFilterStore/getAvailableFilterStore/
getSortStore lazy accessors (+ __reset* helpers for tests), so the
availableFilterStore QueryObserver is built on first use rather than at import.

Update barrels, the startFilterBindings bridge, and all consumers. Reactive
reads in components are wrapped in $derived; two-way bind:value targets resolve
the accessor once and bind directly (a $derived is read-only).
---
 src/features/FilterAndSortFonts/index.ts      | 12 +++++------
 .../FilterAndSortFonts/model/index.ts         | 20 +++++++++----------
 .../appliedFilterStore.svelte.ts              | 19 +++++++++++++-----
 .../availableFilterStore.svelte.ts            | 15 ++++++++++++--
 .../model/store/bindings.svelte.ts            | 10 +++++++---
 .../model/store/sortStore/sortStore.svelte.ts | 16 ++++++++++++++-
 .../model/store/sortStore/sortStore.test.ts   | 16 +++++++++++++--
 .../ui/Filters/Filters.svelte                 |  7 +++++--
 .../ui/Filters/Filters.svelte.test.ts         | 14 ++++++-------
 .../ui/FiltersControl/FilterControls.svelte   | 10 +++++++---
 .../ComparisonView/ui/Search/Search.svelte    |  4 +++-
 .../ui/Search/Search.svelte.test.ts           |  6 +++---
 .../ui/FontSearch/FontSearch.svelte           |  4 +++-
 13 files changed, 107 insertions(+), 46 deletions(-)

diff --git a/src/features/FilterAndSortFonts/index.ts b/src/features/FilterAndSortFonts/index.ts
index c76c3c2..d0535aa 100644
--- a/src/features/FilterAndSortFonts/index.ts
+++ b/src/features/FilterAndSortFonts/index.ts
@@ -1,21 +1,21 @@
 export { mapAppliedFiltersToParams } from './lib';
 
 export {
-    appliedFilterStore,
-    /**
-     * Filter Store
-     */
-    availableFilterStore,
     /**
      * Filter Manager
      */
     createAppliedFilterStore,
+    /**
+     * Lazy store accessors
+     */
+    getAppliedFilterStore,
+    getAvailableFilterStore,
+    getSortStore,
     /**
      * Sort Store
      */
     SORT_MAP,
     SORT_OPTIONS,
-    sortStore,
     startFilterBindings,
 } from './model';
 
diff --git a/src/features/FilterAndSortFonts/model/index.ts b/src/features/FilterAndSortFonts/model/index.ts
index 49ad32a..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,14 +27,14 @@ 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';
 
 /**
@@ -47,6 +47,10 @@ 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 11a65cc..522dd3d 100644
--- a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
@@ -129,14 +129,23 @@ export function createAppliedFilterStore<TValue extends string>(config: FilterCo
 
 export type AppliedFilterStore = ReturnType<typeof createAppliedFilterStore>;
 
+let _appliedFilterStore: AppliedFilterStore | undefined;
+
 /**
- * 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: [],
-});
+export function getAppliedFilterStore(): AppliedFilterStore {
+    return (_appliedFilterStore ??= createAppliedFilterStore<string>({
+        queryValue: '',
+        groups: [],
+    }));
+}
+
+// test-only reset, so specs don't share filter/selection state
+export function __resetAppliedFilterStore() {
+    _appliedFilterStore = undefined;
+}
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 7eff164..265b153 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -126,7 +126,18 @@ export class AvailableFilterStore {
     }
 }
 
+let _availableFilterStore: AvailableFilterStore | undefined;
+
 /**
- * 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();
+export function getAvailableFilterStore(): AvailableFilterStore {
+    return (_availableFilterStore ??= new AvailableFilterStore());
+}
+
+// test-only reset, so specs don't share a live observer
+export function __resetAvailableFilterStore() {
+    _availableFilterStore?.destroy();
+    _availableFilterStore = undefined;
+}
diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index 537d5d8..f5491bb 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -13,11 +13,15 @@ import { getFontCatalog } from '$entities/Font/model';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
 import { mapFilterMetadataToGroups } from '../../lib/mapper/mapFilterMetadataToGroups';
-import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
-import { availableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
-import { sortStore } from './sortStore/sortStore.svelte';
+import { getAppliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
+import { getAvailableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
+import { getSortStore } from './sortStore/sortStore.svelte';
 
 export function startFilterBindings(): () => void {
+    const appliedFilterStore = getAppliedFilterStore();
+    const availableFilterStore = getAvailableFilterStore();
+    const sortStore = getSortStore();
+
     const stop = $effect.root(() => {
         $effect(() => {
             const dynamicFilters = availableFilterStore.filters;
diff --git a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
index 3a8908f..5d2a8ca 100644
--- a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
@@ -44,4 +44,18 @@ export function createSortStore(initial: SortOption = 'Popularity') {
     };
 }
 
-export const sortStore = createSortStore();
+export type SortStore = ReturnType<typeof createSortStore>;
+
+let _sortStore: SortStore | undefined;
+
+/**
+ * App-wide sort store, created on first access.
+ */
+export function getSortStore(): SortStore {
+    return (_sortStore ??= createSortStore());
+}
+
+// test-only reset, so specs don't share selection state
+export function __resetSortStore() {
+    _sortStore = undefined;
+}
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/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/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 },
-- 
2.52.0


From 3dca11fea852aef8584e17d8035644128ddac728 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 18:39:17 +0300
Subject: [PATCH 42/67] refactor(theme): replace themeManager singleton with
 lazy getThemeManager

Convert the eager themeManager singleton to a getThemeManager() lazy accessor
(+ __resetThemeManager for tests), so the persistent-store subscription is set
up on first access rather than at module load. Update the barrel and consumers
(Layout init/destroy, ThemeSwitch, story, test).
---
 src/app/ui/Layout.svelte                      |  4 +++-
 src/features/ChangeAppTheme/model/index.ts    |  2 +-
 .../store/ThemeManager/ThemeManager.svelte.ts | 19 +++++++++++++++----
 .../ui/ThemeSwitch/ThemeSwitch.stories.svelte |  3 ++-
 .../ui/ThemeSwitch/ThemeSwitch.svelte         |  3 ++-
 .../ui/ThemeSwitch/ThemeSwitch.svelte.test.ts | 11 ++++++++++-
 6 files changed, 33 insertions(+), 9 deletions(-)

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/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..271063f 100644
--- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
+++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
@@ -194,15 +194,26 @@ class ThemeManager {
     }
 }
 
+let _themeManager: ThemeManager | undefined;
+
 /**
- * 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();
+export function getThemeManager(): ThemeManager {
+    return (_themeManager ??= new ThemeManager());
+}
+
+// test-only reset, so specs don't share persisted theme state
+export function __resetThemeManager() {
+    _themeManager?.destroy();
+    _themeManager = undefined;
+}
 
 /**
  * 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 });
-- 
2.52.0


From 6877807aafc2ac1ed02e04b3c8c1f5567c50efb7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 18:44:17 +0300
Subject: [PATCH 43/67] refactor(typography): lazy getTypographySettingsStore +
 fix effect leak

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

Fix a latent leak while here: the store ran $effect.root and discarded the
returned cleanup, so its storage-sync effects outlived every instance. Capture
the disposer and expose destroy(), which __reset now calls.
---
 src/features/AdjustTypography/index.ts        |  2 +-
 src/features/AdjustTypography/model/index.ts  |  2 +-
 .../typographySettingsStore.svelte.ts         | 39 ++++++++++++++++---
 .../ui/TypographyMenu/TypographyMenu.svelte   |  3 +-
 .../ui/FontSampler/FontSampler.svelte         |  4 +-
 .../model/stores/comparisonStore.svelte.ts    | 18 ++++++---
 .../model/stores/comparisonStore.test.ts      | 12 +++---
 .../ComparisonView/ui/Line/Line.svelte        |  4 +-
 .../ui/SliderArea/SliderArea.svelte           |  4 +-
 .../ui/SampleList/SampleList.svelte           |  3 +-
 10 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/src/features/AdjustTypography/index.ts b/src/features/AdjustTypography/index.ts
index 2ff571d..28fe87c 100644
--- a/src/features/AdjustTypography/index.ts
+++ b/src/features/AdjustTypography/index.ts
@@ -1,9 +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/index.ts b/src/features/AdjustTypography/model/index.ts
index 4543ff8..6e26ac4 100644
--- a/src/features/AdjustTypography/model/index.ts
+++ b/src/features/AdjustTypography/model/index.ts
@@ -5,6 +5,6 @@ export {
 } 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 7461b22..d7b2512 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -94,6 +94,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;
@@ -117,7 +123,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;
@@ -155,6 +161,13 @@ export class TypographySettingsStore {
         });
     }
 
+    /**
+     * Tears down the storage-sync effects. Call on unmount / store disposal.
+     */
+    destroy(): void {
+        this.#disposeEffects();
+    }
+
     /**
      * Gets initial value for a control from storage or defaults
      */
@@ -336,10 +349,24 @@ export function createTypographySettingsStore(
     return new TypographySettingsStore(configs, storage);
 }
 
+export type TypographySettingsStoreInstance = ReturnType<typeof createTypographySettingsStore>;
+
+let _typographySettingsStore: TypographySettingsStoreInstance | undefined;
+
 /**
- * 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,
-);
+export function getTypographySettingsStore(): TypographySettingsStoreInstance {
+    return (_typographySettingsStore ??= createTypographySettingsStore(
+        DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+        COMPARISON_STORAGE_KEY,
+    ));
+}
+
+// test-only reset, so specs don't share persisted typography state or leak effects
+export function __resetTypographySettingsStore() {
+    _typographySettingsStore?.destroy();
+    _typographySettingsStore = undefined;
+}
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index d5b7b2e..7d8c9bd 100644
--- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
@@ -23,7 +23,7 @@ import {
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
-    typographySettingsStore,
+    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/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 84ba0f6..4d15486 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -9,7 +9,7 @@ import {
     type FontLoadStatus,
     type UnifiedFont,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
+import { getTypographySettingsStore } from '$features/AdjustTypography/model';
 import {
     Badge,
     ContentEditable,
@@ -43,6 +43,8 @@ interface Props {
 
 let { font, status, text = $bindable(), index = 0 }: Props = $props();
 
+const typographySettingsStore = getTypographySettingsStore();
+
 // Extract provider badge with fallback
 const providerBadge = $derived(
     font.providerBadge
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index b4b616a..7abfa6c 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -24,7 +24,10 @@ import {
     fontLifecycleManager,
     getFontCatalog,
 } from '$entities/Font/model';
-import { typographySettingsStore } from '$features/AdjustTypography/model';
+import {
+    type TypographySettingsStore,
+    getTypographySettingsStore,
+} from '$features/AdjustTypography/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
@@ -101,11 +104,14 @@ export class ComparisonStore {
 
     #fontCatalog: FontCatalogStore;
 
+    #typography: TypographySettingsStore;
+
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
         const { fontAId, fontBId } = storage.value;
         this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
         this.#fontCatalog = getFontCatalog();
+        this.#typography = getTypographySettingsStore();
 
         $effect.root(() => {
             // Sync batch results → fontA / fontB
@@ -134,7 +140,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const weight = typographySettingsStore.weight;
+                const weight = this.#typography.weight;
 
                 if (!fa || !fb) {
                     return;
@@ -195,7 +201,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const w = typographySettingsStore.weight;
+                const w = this.#typography.weight;
                 if (fa) {
                     fontLifecycleManager.pin(fa.id, w, fa.features?.isVariable);
                 }
@@ -226,8 +232,8 @@ export class ComparisonStore {
             return;
         }
 
-        const weight = typographySettingsStore.weight;
-        const size = typographySettingsStore.renderedSize;
+        const weight = this.#typography.weight;
+        const size = this.#typography.renderedSize;
         const fontAName = this.#fontA?.name;
         const fontBName = this.#fontB?.name;
 
@@ -356,7 +362,7 @@ export class ComparisonStore {
         this.#fontB = undefined;
         this.#fontsByIdsStore.setIds([]);
         storage.clear();
-        typographySettingsStore.reset();
+        this.#typography.reset();
     }
 }
 
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 1aa0240..495aa70 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -89,12 +89,14 @@ vi.mock('$features/AdjustTypography', () => ({
     })),
 }));
 
+const mockTypography = vi.hoisted(() => ({
+    weight: 400,
+    renderedSize: 48,
+    reset: vi.fn(),
+}));
+
 vi.mock('$features/AdjustTypography/model', () => ({
-    typographySettingsStore: {
-        weight: 400,
-        renderedSize: 48,
-        reset: vi.fn(),
-    },
+    getTypographySettingsStore: () => mockTypography,
 }));
 
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index e25c30f..96e8b6d 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -11,7 +11,7 @@ import {
     type ComparisonLine,
     computeLineRenderModel,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/AdjustTypography';
+import { getTypographySettingsStore } from '$features/AdjustTypography';
 import { getComparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 
@@ -36,7 +36,7 @@ const comparisonStore = getComparisonStore();
 
 const model = $derived(computeLineRenderModel(line, split, windowSize));
 
-const typography = $derived(typographySettingsStore);
+const typography = getTypographySettingsStore();
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index b3a62d8..8b98abe 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -18,7 +18,7 @@ import {
     MULTIPLIER_M,
     MULTIPLIER_S,
     TypographyMenu,
-    typographySettingsStore,
+    getTypographySettingsStore,
 } from '$features/AdjustTypography';
 import {
     type ResponsiveManager,
@@ -81,7 +81,7 @@ const SLIDER_STEP_COARSE = 10;
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
-const typography = $derived(typographySettingsStore);
+const typography = getTypographySettingsStore();
 
 let container = $state<HTMLElement>();
 
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index fa9861f..20f7a21 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -15,7 +15,7 @@ import {
 } from '$entities/Font/model';
 import {
     TypographyMenu,
-    typographySettingsStore,
+    getTypographySettingsStore,
 } from '$features/AdjustTypography';
 import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
@@ -23,6 +23,7 @@ import { Skeleton } from '$shared/ui';
 import { layoutManager } from '../../model';
 
 const fontCatalog = getFontCatalog();
+const typographySettingsStore = getTypographySettingsStore();
 
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
-- 
2.52.0


From 839460726eb4c74112835a45c319c0c2d39af91f Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 18:46:10 +0300
Subject: [PATCH 44/67] refactor(breadcrumb): replace scrollBreadcrumbsStore
 singleton with lazy accessor

Convert the eager scrollBreadcrumbsStore singleton to getScrollBreadcrumbsStore()
(+ __resetScrollBreadcrumbsStore for tests) and add a public destroy() that
disconnects the IntersectionObserver and scroll listener. Update the feature
barrel and consumers (BreadcrumbHeader, BreadcrumbHeaderSeeded, NavigationWrapper).
---
 src/features/Breadcrumb/index.ts              |  2 +-
 .../store/scrollBreadcrumbsStore.svelte.ts    | 21 +++++++++++++++++--
 .../BreadcrumbHeader/BreadcrumbHeader.svelte  |  3 ++-
 .../BreadcrumbHeaderSeeded.svelte             |  4 +++-
 .../NavigationWrapper.svelte                  |  4 +++-
 5 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/features/Breadcrumb/index.ts b/src/features/Breadcrumb/index.ts
index 882b16e..b148cc3 100644
--- a/src/features/Breadcrumb/index.ts
+++ b/src/features/Breadcrumb/index.ts
@@ -26,8 +26,8 @@
  */
 
 export {
+    getScrollBreadcrumbsStore,
     type NavigationAction,
-    scrollBreadcrumbsStore,
 } from './model';
 export {
     BreadcrumbHeader,
diff --git a/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
index 74badbe..4183428 100644
--- a/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
+++ b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
@@ -167,6 +167,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
      */
@@ -272,7 +279,17 @@ export function createScrollBreadcrumbsStore(): ScrollBreadcrumbsStore {
     return new ScrollBreadcrumbsStore();
 }
 
+let _scrollBreadcrumbsStore: ScrollBreadcrumbsStore | undefined;
+
 /**
- * Singleton scroll breadcrumbs store instance
+ * App-wide scroll breadcrumbs store, created on first access.
  */
-export const scrollBreadcrumbsStore = createScrollBreadcrumbsStore();
+export function getScrollBreadcrumbsStore(): ScrollBreadcrumbsStore {
+    return (_scrollBreadcrumbsStore ??= createScrollBreadcrumbsStore());
+}
+
+// test-only reset, so specs don't share observer/scroll state
+export function __resetScrollBreadcrumbsStore() {
+    _scrollBreadcrumbsStore?.destroy();
+    _scrollBreadcrumbsStore = undefined;
+}
diff --git a/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index e48dcf9..73b7aee 100644
--- a/src/features/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/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
index 792d86c..af9cc17 100644
--- a/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
+++ b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
@@ -1,8 +1,10 @@
 <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' },
diff --git a/src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte b/src/features/Breadcrumb/ui/NavigationWrapper/NavigationWrapper.svelte
index 3c8d602..d8796b6 100644
--- a/src/features/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
-- 
2.52.0


From b3bc40b76c4029157cf194390767c7e73bdfafab Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 1 Jun 2026 18:49:47 +0300
Subject: [PATCH 45/67] refactor(font): replace fontLifecycleManager singleton
 with lazy accessor

Convert the eager fontLifecycleManager singleton to getFontLifecycleManager()
(+ __resetFontLifecycleManager for tests), so its AbortController/FontFace
bookkeeping is set up on first use rather than at module load. Update consumers
(FontVirtualList, FontList, SampleList) and resolve it once as a field in
comparisonStore; the comparisonStore mock now exposes getFontLifecycleManager.
---
 .../fontLifecycleManager.svelte.ts            | 15 ++++++++--
 .../ui/FontVirtualList/FontVirtualList.svelte |  3 +-
 .../model/stores/comparisonStore.svelte.ts    | 16 ++++++----
 .../model/stores/comparisonStore.test.ts      | 29 +++++++++----------
 .../ui/FontList/FontList.svelte               |  3 +-
 .../ui/SampleList/SampleList.svelte           |  3 +-
 6 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
index 9439a87..f159a82 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
@@ -419,7 +419,18 @@ export class FontLifecycleManager {
     }
 }
 
+let _fontLifecycleManager: FontLifecycleManager | undefined;
+
 /**
- * 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();
+export function getFontLifecycleManager(): FontLifecycleManager {
+    return (_fontLifecycleManager ??= new FontLifecycleManager());
+}
+
+// test-only reset, so specs don't share loaded-font/eviction state
+export function __resetFontLifecycleManager() {
+    _fontLifecycleManager?.destroy();
+    _fontLifecycleManager = undefined;
+}
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index bb71dd8..4fdf6a5 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -15,8 +15,8 @@ import { createFontLoadRequestContfig } from '../../lib/createFontLoadRequestCon
 import {
     type FontLoadRequestConfig,
     type UnifiedFont,
-    fontLifecycleManager,
     getFontCatalog,
+    getFontLifecycleManager,
 } from '../../model';
 
 interface Props extends
@@ -53,6 +53,7 @@ let {
 }: Props = $props();
 
 const fontCatalog = getFontCatalog();
+const fontLifecycleManager = getFontLifecycleManager();
 
 const isLoading = $derived<boolean>(fontCatalog?.isLoading);
 const isFetching = $derived<boolean>(fontCatalog.isFetching);
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 7abfa6c..4b84354 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -20,9 +20,10 @@ import {
 } from '$entities/Font';
 import {
     type FontCatalogStore,
+    type FontLifecycleManager,
     FontsByIdsStore,
-    fontLifecycleManager,
     getFontCatalog,
+    getFontLifecycleManager,
 } from '$entities/Font/model';
 import {
     type TypographySettingsStore,
@@ -106,12 +107,15 @@ export class ComparisonStore {
 
     #typography: TypographySettingsStore;
 
+    #lifecycle: FontLifecycleManager;
+
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
         const { fontAId, fontBId } = storage.value;
         this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
         this.#fontCatalog = getFontCatalog();
         this.#typography = getTypographySettingsStore();
+        this.#lifecycle = getFontLifecycleManager();
 
         $effect.root(() => {
             // Sync batch results → fontA / fontB
@@ -161,7 +165,7 @@ export class ComparisonStore {
                 });
 
                 if (configs.length > 0) {
-                    fontLifecycleManager.touch(configs);
+                    this.#lifecycle.touch(configs);
                     this.#checkFontsLoaded();
                 }
             });
@@ -203,17 +207,17 @@ export class ComparisonStore {
                 const fb = this.#fontB;
                 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);
                     }
                 };
             });
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 495aa70..323e0b3 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -63,6 +63,14 @@ vi.mock('$entities/Font', async importOriginal => {
     };
 });
 
+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 => {
@@ -70,13 +78,7 @@ vi.mock('$entities/Font/model', async importOriginal => {
     return {
         ...actual,
         getFontCatalog: () => mockFontCatalog,
-        fontLifecycleManager: {
-            touch: vi.fn(),
-            pin: vi.fn(),
-            unpin: vi.fn(),
-            getFontStatus: vi.fn(),
-            ready: vi.fn(() => Promise.resolve()),
-        },
+        getFontLifecycleManager: () => mockLifecycle,
     };
 });
 
@@ -100,10 +102,7 @@ vi.mock('$features/AdjustTypography/model', () => ({
 }));
 
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
-import {
-    fontLifecycleManager,
-    getFontCatalog,
-} from '$entities/Font/model';
+import { getFontCatalog } from '$entities/Font/model';
 import { __resetFontCatalog } from '$entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte';
 import { ComparisonStore } from './comparisonStore.svelte';
 
@@ -273,12 +272,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,
@@ -299,12 +298,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/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index cc8de36..817b863 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -11,8 +11,8 @@ import {
     VIRTUAL_INDEX_NOT_LOADED,
 } from '$entities/Font';
 import {
-    fontLifecycleManager,
     getFontCatalog,
+    getFontLifecycleManager,
 } from '$entities/Font/model';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
@@ -33,6 +33,7 @@ import {
 
 const fontCatalog = getFontCatalog();
 const comparisonStore = getComparisonStore();
+const fontLifecycleManager = getFontLifecycleManager();
 
 const fonts = $derived<UnifiedFont[]>(fontCatalog.fonts);
 const side = $derived<Side>(comparisonStore.side);
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 20f7a21..b7b0162 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -10,8 +10,8 @@ import {
     createFontRowSizeResolver,
 } from '$entities/Font';
 import {
-    fontLifecycleManager,
     getFontCatalog,
+    getFontLifecycleManager,
 } from '$entities/Font/model';
 import {
     TypographyMenu,
@@ -24,6 +24,7 @@ import { layoutManager } from '../../model';
 
 const fontCatalog = getFontCatalog();
 const typographySettingsStore = getTypographySettingsStore();
+const fontLifecycleManager = getFontLifecycleManager();
 
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
-- 
2.52.0


From 7ddf232e3a55ee28508b7572c7bc4fc1b263568e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 09:09:20 +0300
Subject: [PATCH 46/67] refactor(sample-list): replace layoutManager singleton
 with lazy accessor

Convert the eager layoutManager singleton to getLayoutManager() (+ __resetLayoutManager
for tests), so its persisted layout preference is read on first access rather than at
module load. Update the model barrels and consumers (LayoutSwitch, SampleListSection,
SampleList) with $derived reads; the LayoutSwitch test resolves via the accessor.
---
 src/widgets/SampleList/model/index.ts              |  2 +-
 src/widgets/SampleList/model/stores/index.ts       |  2 +-
 .../model/stores/layoutStore/layoutStore.svelte.ts | 14 ++++++++++++--
 .../SampleList/ui/LayoutSwitch/LayoutSwitch.svelte |  9 ++++++---
 .../ui/LayoutSwitch/LayoutSwitch.svelte.test.ts    | 11 ++++++++++-
 .../SampleList/ui/SampleList/SampleList.svelte     | 10 +++++++---
 .../ui/SampleListSection/SampleListSection.svelte  |  7 +++++--
 7 files changed, 42 insertions(+), 13 deletions(-)

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..b40a19c 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
@@ -146,10 +146,20 @@ class LayoutManager {
     }
 }
 
+let _layoutManager: LayoutManager | undefined;
+
 /**
- * Singleton layout manager instance
+ * App-wide layout manager, created on first access. Lazy so its persisted
+ * layout preference isn't read at module load.
  */
-export const layoutManager = new LayoutManager();
+export function getLayoutManager(): LayoutManager {
+    return (_layoutManager ??= new LayoutManager());
+}
+
+// test-only reset, so specs don't share persisted layout state
+export function __resetLayoutManager() {
+    _layoutManager = undefined;
+}
 
 // Export class for testing purposes
 export { LayoutManager };
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 b7b0162..fab8af8 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -20,11 +20,15 @@ import {
 import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 
 const fontCatalog = getFontCatalog();
 const typographySettingsStore = getTypographySettingsStore();
 const fontLifecycleManager = getFontLifecycleManager();
+const layoutManager = getLayoutManager();
+
+const columns = $derived(layoutManager.columns);
+const gap = $derived(layoutManager.gap);
 
 // FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
 // Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
@@ -114,8 +118,8 @@ const fontRowHeight = $derived.by(() =>
         itemHeight={fontRowHeight}
         useWindowScroll={true}
         weight={typographySettingsStore.weight}
-        columns={layoutManager.columns}
-        gap={layoutManager.gap}
+        {columns}
+        {gap}
         {skeleton}
     >
         {#snippet children({ item: font, index })}
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index fe312a4..6651fd4 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -12,7 +12,7 @@ import {
     Section,
 } from '$shared/ui';
 import { getContext } from 'svelte';
-import { layoutManager } from '../../model';
+import { getLayoutManager } from '../../model';
 import LayoutSwitch from '../LayoutSwitch/LayoutSwitch.svelte';
 import SampleList from '../SampleList/SampleList.svelte';
 
@@ -29,6 +29,9 @@ const responsive = getContext<ResponsiveManager>('responsive');
 
 const fontCatalog = getFontCatalog();
 const total = $derived<number>(fontCatalog?.pagination?.total);
+
+const layoutManager = getLayoutManager();
+const mode = $derived(layoutManager.mode);
 </script>
 
 <NavigationWrapper index={2} title="Samples">
@@ -46,7 +49,7 @@ const total = $derived<number>(fontCatalog?.pagination?.total);
                 <div class="flex items-center gap-3 md:gap-4">
                     <div class="hidden md:flex items-center gap-2 mr-4">
                         <Label variant="muted" size="sm">view_mode: </Label>
-                        <Label variant="default" size="sm" bold>{layoutManager.mode}</Label>
+                        <Label variant="default" size="sm" bold>{mode}</Label>
                     </div>
                     <LayoutSwitch />
                 </div>
-- 
2.52.0


From deefb51b57b65601eb67a4d28f20fc401d971b33 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:01:04 +0300
Subject: [PATCH 47/67] chore(lint): repair oxlint config and enforce FSD
 boundaries

oxlint was never loading its config: the file was named oxlint.json but
oxlint only auto-discovers .oxlintrc.json/.jsonc, and the `ignore` field
was invalid (should be `ignorePatterns`). So import/no-cycle and every
other rule silently never ran.

- rename oxlint.json -> .oxlintrc.json, fix ignore -> ignorePatterns
- turn off the restriction/style category grab-bags (opt-in, partly
  contradictory); enable wanted rules individually
- add overrides enforcing FSD layer direction and the interior
  ui -> model -> domain law via no-restricted-imports (oxlint has no
  zone rule); import/no-cycle resolves $-aliases via tsconfig discovery
---
 .oxlintrc.json | 195 +++++++++++++++++++++++++++++++++++++++++++++++++
 oxlint.json    |  29 --------
 2 files changed, 195 insertions(+), 29 deletions(-)
 create mode 100644 .oxlintrc.json
 delete mode 100644 oxlint.json

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/oxlint.json b/oxlint.json
deleted file mode 100644
index ab5c55e..0000000
--- a/oxlint.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "plugins": ["import"],
-  "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",
-    "import/no-cycle": "error"
-  }
-}
-- 
2.52.0


From 9788f07dec9f9954ed1896e78b8a0600efe7dc35 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:01:48 +0300
Subject: [PATCH 48/67] refactor: remove unused vars and dead code

Cleanup surfaced once the oxlint config actually loads (no-unused-vars).

- drop dead locals/imports/params (cachedOffsetTop, elasticOut, key,
  unused type imports, unused test imports; _-prefix unused mock params)
- createVirtualizer: keep the _version read (reactive subscription inside
  $derived.by) but bind it to _v so it is not flagged
- scrollBreadcrumbsStore.test: keep the removeEventListener mock side
  effect, drop the unread spy binding
---
 .../fontLifecycleManager/utils/loadFont/loadFont.test.ts   | 2 +-
 src/entities/Font/testing/stores.mock.ts                   | 6 +-----
 .../typographySettingsStore.svelte.ts                      | 3 ---
 .../Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts  | 5 ++---
 .../store/appliedFilterStore/appliedFilterStore.test.ts    | 6 ------
 .../helpers/createVirtualizer/createVirtualizer.svelte.ts  | 7 ++-----
 .../lib/transitions/springySlideFade/springySlideFade.ts   | 4 ----
 src/widgets/ComparisonView/lib/utils/dotTransition.ts      | 1 -
 src/widgets/Footer/ui/Footer/Footer.svelte.test.ts         | 6 +-----
 .../model/stores/layoutStore/layoutStore.test.ts           | 2 --
 10 files changed, 7 insertions(+), 35 deletions(-)

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/entities/Font/testing/stores.mock.ts b/src/entities/Font/testing/stores.mock.ts
index cb10931..02d29bc 100644
--- a/src/entities/Font/testing/stores.mock.ts
+++ b/src/entities/Font/testing/stores.mock.ts
@@ -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/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index d7b2512..e0c4224 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -302,9 +302,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;
                 }
diff --git a/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.test.ts
index dd3929b..8ab9d0c 100644
--- a/src/features/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/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/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/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/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/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/stores/layoutStore/layoutStore.test.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
index 6dc2d19..8b7bcc0 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
@@ -3,12 +3,10 @@
  */
 
 import {
-    afterEach,
     beforeEach,
     describe,
     expect,
     it,
-    vi,
 } from 'vitest';
 
 // Helper to flush Svelte effects (they run in microtasks)
-- 
2.52.0


From f3a10e38dfacfb580756ce582323180d6322aba0 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:01:59 +0300
Subject: [PATCH 49/67] refactor: clear remaining lint errors (comma operator,
 bind:this ref)

- splitArray: replace the comma-operator reduce body with an explicit
  block + return (no-sequences); behaviour unchanged
- BreadcrumbHeaderSeeded: declare the bind:this ref with $state() so it
  is not flagged as never-assigned (oxlint cannot see template bindings),
  matching the rest of the codebase; guard the onMount use
---
 .../ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte |  8 ++++++--
 src/shared/lib/utils/splitArray/splitArray.ts         | 11 ++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
index af9cc17..0052c57 100644
--- a/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
+++ b/src/features/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeaderSeeded.svelte
@@ -11,10 +11,14 @@ const sections = [
     { 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/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];
+        },
         [[], []],
     );
 }
-- 
2.52.0


From c6c8497906e116945a2ba80fd5a754c1d1f161b9 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:02:07 +0300
Subject: [PATCH 50/67] fix: break import cycles

import/no-cycle (now active) flagged 17 cycles across 12 files:

- shared/ui self-barrel cycles (Logo/Stat/StatGroup/ComboControl/
  FilterGroup/SectionHeader): import siblings relatively instead of
  through the $shared/ui barrel that re-exports them
- shared/lib/utils: roundToStepPrecision imports getDecimalPlaces
  relatively instead of via the utils barrel
- routes: lazy-load Redirect in the router so it no longer statically
  imports a component that imports navigate back from it
---
 src/routes/router.ts                                      | 5 +++--
 .../utils/roundToStepPrecision/roundToStepPrecision.ts    | 2 +-
 src/shared/ui/ComboControl/ComboControl.svelte            | 8 +++-----
 src/shared/ui/FilterGroup/FilterGroup.svelte              | 4 ++--
 src/shared/ui/Logo/Logo.svelte                            | 2 +-
 src/shared/ui/Section/SectionHeader/SectionHeader.svelte  | 2 +-
 src/shared/ui/Stat/Stat.svelte                            | 2 +-
 src/shared/ui/Stat/StatGroup.svelte                       | 2 +-
 8 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/routes/router.ts b/src/routes/router.ts
index 49e21cd..4c3ce68 100644
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@@ -1,6 +1,5 @@
 import { createRouter } from 'sv-router';
 import Home from './Home.svelte';
-import Redirect from './Redirect.svelte';
 
 /**
  * Single-page router for glyphdiff.
@@ -18,6 +17,8 @@ export const {
     '/': 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': Redirect,
+    '*notfound': () => import('./Redirect.svelte'),
 });
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/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index ac72f66..99eae67 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -5,13 +5,11 @@
 -->
 <script lang="ts">
 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,
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/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/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/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;
-- 
2.52.0


From 771bda745cc7806a350e1de5d2520e17bc56435a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:02:18 +0300
Subject: [PATCH 51/67] refactor: replace export* barrels with explicit named
 exports

Wildcard re-exports obscure each slice public surface and weaken
tree-shaking. Convert to explicit named re-exports with export/export
type split (B-1) for ComparisonView, ChangeAppTheme, Breadcrumb/model,
and FilterAndSortFonts/api barrels.
---
 src/features/Breadcrumb/model/index.ts       |  9 +++++++--
 src/features/ChangeAppTheme/index.ts         |  4 ++--
 src/features/FilterAndSortFonts/api/index.ts |  7 ++++++-
 src/widgets/ComparisonView/index.ts          |  3 ++-
 src/widgets/ComparisonView/lib/index.ts      | 10 +++++++---
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/features/Breadcrumb/model/index.ts b/src/features/Breadcrumb/model/index.ts
index ae6af4f..d5aee2c 100644
--- a/src/features/Breadcrumb/model/index.ts
+++ b/src/features/Breadcrumb/model/index.ts
@@ -1,2 +1,7 @@
-export * from './store/scrollBreadcrumbsStore.svelte';
-export * from './types/types.ts';
+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/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/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/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';
-- 
2.52.0


From b390efdabecabadddee551f32055d2805b7030b6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:02:30 +0300
Subject: [PATCH 52/67] refactor(entities/Font): named public API and expose
 stores via root barrel

Stores were only reachable by deep-importing $entities/Font/model, so
consumers reached past the slice public API (FSD anti-pattern D, B-3/D-2).

- convert the Font barrels (root, model, model/store, model/types) to
  explicit named exports with export/export type split (B-1)
- re-export the lazy store accessors/classes from the root barrel so the
  entity public API is complete and inert at import (construction stays
  lazy; the root already loads tanstack via ./ui)
- repoint all consumers (SampleList, SampleListSection, FontList,
  comparisonStore, bindings) from $entities/Font/model to $entities/Font
---
 src/entities/Font/index.ts                    | 105 ++++++++++++++----
 src/entities/Font/model/index.ts              |  53 ++++++++-
 src/entities/Font/model/store/index.ts        |   7 +-
 src/entities/Font/model/types/index.ts        |   5 +-
 .../model/store/bindings.svelte.ts            |   2 +-
 .../model/stores/comparisonStore.svelte.ts    |  10 +-
 .../ui/FontList/FontList.svelte               |   4 +-
 .../ui/SampleList/SampleList.svelte           |   4 +-
 .../SampleListSection.svelte                  |   2 +-
 9 files changed, 149 insertions(+), 43 deletions(-)

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index d25188a..af4d2b2 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -1,29 +1,90 @@
-export * from './domain';
-export * from './lib';
-export * from './ui';
+export {
+    computeLineRenderModel,
+    DualFontLayout,
+    findSplitIndex,
+} from './domain';
+export type {
+    ComparisonLine,
+    ComparisonResult,
+    LineRenderModel,
+} from './domain';
 
-// Pure model surface (types + constants) is part of the convenient top-level
-// API. Stateful stores are deliberately excluded — see below.
-export * from './model/const/const';
-export * from './model/types';
+export {
+    createFontRowSizeResolver,
+    FontNetworkError,
+    FontResponseError,
+    getFontUrl,
+} from './lib';
+export type { FontRowSizeResolverOptions } from './lib';
+
+export {
+    FontApplicator,
+    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 clients import `$shared/api/queryClient`, whose
- * module eval runs `new QueryClient()` and loads `@tanstack/query-core`. Funneling
- * them through this barrel made every consumer of `$entities/Font` — including
- * pure-domain and type-only importers — eager-load TanStack and construct the
- * client (notably in unit specs). Import API clients via the segment:
- *   import { fetchProxyFonts } from '$entities/Font/api';
- */
-
-/*
- * Stores (`fontCatalogStore`, `fontLifecycleManager`, `FontsByIdsStore`) are
- * intentionally NOT re-exported here. They instantiate module-level singletons
- * and pull `@tanstack/query-core`, so funneling them through this barrel would
- * make every consumer of `$entities/Font` eager-instantiate stores (and break
- * tree-shaking / test init-order). Import them via the model segment:
- *   import { fontCatalogStore } from '$entities/Font/model';
+ * 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
diff --git a/src/entities/Font/model/index.ts b/src/entities/Font/model/index.ts
index 36cbda2..d605aeb 100644
--- a/src/entities/Font/model/index.ts
+++ b/src/entities/Font/model/index.ts
@@ -1,6 +1,51 @@
-export * from './const/const';
+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';
 
-export { getFontCatalog } from './store';
+// Stores (lazy accessors + classes)
+export {
+    __resetFontLifecycleManager,
+    FontLifecycleManager,
+    FontsByIdsStore,
+    getFontCatalog,
+    getFontLifecycleManager,
+} from './store';
+export type { FontCatalogStore } from './store';
 
-export * from './store';
-export * from './types';
+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/index.ts b/src/entities/Font/model/store/index.ts
index d0d0024..3f05f83 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -1,9 +1,12 @@
 // Font lifecycle manager (browser-side load + cache + eviction)
-export * from './fontLifecycleManager/fontLifecycleManager.svelte';
+export {
+    __resetFontLifecycleManager,
+    FontLifecycleManager,
+    getFontLifecycleManager,
+} from './fontLifecycleManager/fontLifecycleManager.svelte';
 
 // Paginated catalog
 export { getFontCatalog } from './fontCatalogStore/fontCatalogStore.svelte';
-
 export type { FontCatalogStore } from './fontCatalogStore/fontCatalogStore.svelte';
 
 // Batch fetch by IDs (detail-cache seeding)
diff --git a/src/entities/Font/model/types/index.ts b/src/entities/Font/model/types/index.ts
index fd43b4d..18b2443 100644
--- a/src/entities/Font/model/types/index.ts
+++ b/src/entities/Font/model/types/index.ts
@@ -23,4 +23,7 @@ export type {
     FontCollectionState,
 } from './store';
 
-export * from './store/fontLifecycle';
+export type {
+    FontLoadRequestConfig,
+    FontLoadStatus,
+} from './store/fontLifecycle';
diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index f5491bb..ddb0c6c 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -9,7 +9,7 @@
  * observer, so it lives at module scope, not in any individual widget.
  */
 
-import { getFontCatalog } from '$entities/Font/model';
+import { getFontCatalog } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
 import { mapFilterMetadataToGroups } from '../../lib/mapper/mapFilterMetadataToGroups';
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 4b84354..4be6115 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -13,18 +13,16 @@
  * - Slider position for character-by-character morphing
  */
 
-import {
-    type FontLoadRequestConfig,
-    type UnifiedFont,
-    getFontUrl,
-} from '$entities/Font';
 import {
     type FontCatalogStore,
     type FontLifecycleManager,
+    type FontLoadRequestConfig,
     FontsByIdsStore,
+    type UnifiedFont,
     getFontCatalog,
     getFontLifecycleManager,
-} from '$entities/Font/model';
+    getFontUrl,
+} from '$entities/Font';
 import {
     type TypographySettingsStore,
     getTypographySettingsStore,
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 817b863..396b31f 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -9,11 +9,9 @@ import {
     FontVirtualList,
     type UnifiedFont,
     VIRTUAL_INDEX_NOT_LOADED,
-} from '$entities/Font';
-import {
     getFontCatalog,
     getFontLifecycleManager,
-} from '$entities/Font/model';
+} from '$entities/Font';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
     Button,
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index fab8af8..b6a63ed 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -8,11 +8,9 @@
 import {
     FontVirtualList,
     createFontRowSizeResolver,
-} from '$entities/Font';
-import {
     getFontCatalog,
     getFontLifecycleManager,
-} from '$entities/Font/model';
+} from '$entities/Font';
 import {
     TypographyMenu,
     getTypographySettingsStore,
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index 6651fd4..477e623 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -3,7 +3,7 @@
     Wraps SampleList with a Section component
 -->
 <script lang="ts">
-import { getFontCatalog } from '$entities/Font/model';
+import { getFontCatalog } from '$entities/Font';
 import { NavigationWrapper } from '$features/Breadcrumb';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
-- 
2.52.0


From 60e115309cafa4ec7e2e126d7545d40b801d04ef Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:13:03 +0300
Subject: [PATCH 53/67] refactor(shared/api): lazify queryClient to remove
 eager-construction footgun
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

queryClient.ts constructed the TanStack client at module eval but was not
in the sideEffects allowlist, so Rollup treated the module as pure — safe
only while a value-importer keeps it alive (D-3).

- replace the eager `queryClient` singleton with a memoized getQueryClient()
  factory; construction is deferred to first call
- the module is now genuinely side-effect-free, so no sideEffects exception
  is needed and construction can never be legally tree-shaken away
- route all consumers through getQueryClient() (QueryProvider as first
  caller; stores via class fields/observers; tests via a local alias; the
  fontCatalogStore spec mock now overrides getQueryClient)
---
 src/app/providers/QueryProvider.svelte        |  5 +-
 .../Font/api/proxy/proxyFonts.test.ts         |  4 +-
 src/entities/Font/api/proxy/proxyFonts.ts     |  4 +-
 .../fontCatalogStore.svelte.spec.ts           | 11 ++--
 .../fontCatalogStore.svelte.ts                |  4 +-
 .../fontsByIdsStore/fontsByIdsStore.test.ts   |  4 +-
 .../availableFilterStore.svelte.ts            |  4 +-
 .../availableFilterStore.test.ts              |  4 +-
 src/shared/api/queryClient.ts                 | 63 ++++++++++---------
 .../BaseQueryStore/BaseQueryStore.svelte.ts   |  4 +-
 .../BaseQueryStore/BaseQueryStore.test.ts     |  4 +-
 .../model/stores/comparisonStore.test.ts      |  4 +-
 vitest.setup.component.ts                     |  4 +-
 13 files changed, 71 insertions(+), 48 deletions(-)

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/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/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
index 230512e..278e8e0 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -27,18 +27,21 @@ vi.mock('$shared/api/queryClient', async importOriginal => {
      */
     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 72b3d56..ceff630 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -1,7 +1,7 @@
 import {
     DEFAULT_QUERY_GC_TIME_MS,
     DEFAULT_QUERY_STALE_TIME_MS,
-    queryClient,
+    getQueryClient,
 } from '$shared/api/queryClient';
 import {
     type InfiniteData,
@@ -46,7 +46,7 @@ export class FontCatalogStore {
         readonly unknown[],
         PageParam
     >;
-    #qc = queryClient;
+    #qc = getQueryClient();
     #unsubscribe: () => void;
 
     constructor(params: FontStoreParams = {}) {
diff --git a/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
index 0acf5a9..16ce2fe 100644
--- a/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
+++ b/src/entities/Font/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
@@ -1,4 +1,6 @@
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import { fontKeys } from '$shared/api/queryKeys';
 import {
     beforeEach,
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 265b153..02d2c3f 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -20,7 +20,7 @@ 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 {
     type QueryKey,
@@ -49,7 +49,7 @@ export class AvailableFilterStore {
     /**
      * Shared query client
      */
-    protected qc = queryClient;
+    protected qc = getQueryClient();
 
     /**
      * Creates a new filters store
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/shared/api/queryClient.ts b/src/shared/api/queryClient.ts
index 1e921e5..95ba830 100644
--- a/src/shared/api/queryClient.ts
+++ b/src/shared/api/queryClient.ts
@@ -27,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)
@@ -39,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/BaseQueryStore.svelte.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.svelte.ts
index c50cb8a..ee0a3ea 100644
--- a/src/shared/lib/helpers/BaseQueryStore/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/BaseQueryStore.test.ts b/src/shared/lib/helpers/BaseQueryStore/BaseQueryStore.test.ts
index 00b8ea0..31654c7 100644
--- a/src/shared/lib/helpers/BaseQueryStore/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/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 323e0b3..b151733 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -11,7 +11,9 @@
 
 import type { UnifiedFont } from '$entities/Font';
 import { UNIFIED_FONTS } from '$entities/Font/testing';
-import { queryClient } from '$shared/api/queryClient';
+import { getQueryClient } from '$shared/api/queryClient';
+
+const queryClient = getQueryClient();
 import {
     beforeEach,
     describe,
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
-- 
2.52.0


From 1c6427c586e002158f1f814424dca3721d76aca7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:17:27 +0300
Subject: [PATCH 54/67] chore: drop vestigial $lib alias

$lib pointed at src/lib/, which does not exist, and nothing imported it.
Removed the dead alias from all five declaration sites (tsconfig plus the
vite and three vitest configs). A stray $lib import now fails fast as an
unknown alias instead of resolving to a missing path.
---
 tsconfig.json              | 1 -
 vite.config.ts             | 1 -
 vitest.config.browser.ts   | 1 -
 vitest.config.component.ts | 1 -
 vitest.config.ts           | 1 -
 5 files changed, 5 deletions(-)

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'),
-- 
2.52.0


From 028853aff564a2e0f08fa617a941e4ed8bf42643 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 2 Jun 2026 23:34:08 +0300
Subject: [PATCH 55/67] chore: drop stale bindings.svelte.ts from sideEffects
 allowlist

bindings.svelte.ts no longer has a top-level side effect: the $effect.root
bridge was moved into startFilterBindings(), wired explicitly by the
app-layer AppBindings provider (onMount). Nothing imports it
side-effect-only anymore, so the allowlist entry falsely marked a now-pure
module as impure. Stores and queryClient are lazy getX() accessors, so they
correctly need no entry either.

Allowlist is now just *.css (style injection) and **/router.ts
(createRouter at eval). Verified: production build succeeds and
startFilterBindings is retained as a used export.
---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3a2299d..f9f5b58 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
   "type": "module",
   "sideEffects": [
     "*.css",
-    "**/router.ts",
-    "**/bindings.svelte.ts"
+    "**/router.ts"
   ],
   "scripts": {
     "dev": "vite",
-- 
2.52.0


From 09869aed00709a9315132ba5f57efe36e2f20950 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 08:34:49 +0300
Subject: [PATCH 56/67] refactor(entities/Font): relocate FontSampler from
 DisplayFont, invert typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DisplayFont was not a feature (FSD+ A-6): the whole slice was one
presentational component that renders a Font styled by typography, with no
model/domain/action. To get typography it reached sideways into a sibling
feature (`$features/AdjustTypography/model`) — a feature->feature edge
(C-1), the symptom of the mislayering, not the disease.

Fix by inversion, mirroring the existing `status` prop pattern:

- move FontSampler into entities/Font/ui (it now uses only entity siblings
  + $shared/ui)
- it accepts a `typography` prop typed to a minimal contract defined in the
  component; the AdjustTypography store satisfies it structurally, so the
  entity has no dependency on the feature
- SampleList (owns both) injects its typographySettingsStore as the prop
- delete the DisplayFont slice; export FontSampler from the Font barrel;
  relocate the story (now passes a mock typography)

Resolves A-6, A-7, and the FontSampler half of C-1. Verified: 0 type
errors, 0 lint (boundary rule satisfied), 905 unit + 213 component tests,
production build OK.
---
 src/entities/Font/index.ts                    |  1 +
 .../ui/FontSampler/FontSampler.stories.svelte | 14 ++++-
 .../Font}/ui/FontSampler/FontSampler.svelte   | 61 +++++++++++++------
 src/entities/Font/ui/index.ts                 |  2 +
 src/features/DisplayFont/index.ts             |  1 -
 src/features/DisplayFont/ui/index.ts          |  3 -
 .../ui/SampleList/SampleList.svelte           |  4 +-
 7 files changed, 61 insertions(+), 25 deletions(-)
 rename src/{features/DisplayFont => entities/Font}/ui/FontSampler/FontSampler.stories.svelte (90%)
 rename src/{features/DisplayFont => entities/Font}/ui/FontSampler/FontSampler.svelte (78%)
 delete mode 100644 src/features/DisplayFont/index.ts
 delete mode 100644 src/features/DisplayFont/ui/index.ts

diff --git a/src/entities/Font/index.ts b/src/entities/Font/index.ts
index af4d2b2..b93f0fc 100644
--- a/src/entities/Font/index.ts
+++ b/src/entities/Font/index.ts
@@ -19,6 +19,7 @@ export type { FontRowSizeResolverOptions } from './lib';
 
 export {
     FontApplicator,
+    FontSampler,
     FontVirtualList,
 } from './ui';
 
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte b/src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
similarity index 90%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.stories.svelte
index 0a5dadb..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: {
@@ -39,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 = {
@@ -84,6 +84,14 @@ 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
@@ -93,6 +101,7 @@ const mockGeorgia: UnifiedFont = {
         status: 'loaded',
         text: 'The quick brown fox jumps over the lazy dog',
         index: 0,
+        typography: mockTypography,
     }}
 >
     {#snippet template(args: ComponentProps<typeof FontSampler>)}
@@ -111,6 +120,7 @@ const mockGeorgia: UnifiedFont = {
         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 78%
rename from src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
rename to src/entities/Font/ui/FontSampler/FontSampler.svelte
index 4d15486..bf019e8 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.svelte
@@ -4,12 +4,6 @@
     Visual design matches FontCard: sharp corners, red hover accent, header stats.
 -->
 <script lang="ts">
-import {
-    FontApplicator,
-    type FontLoadStatus,
-    type UnifiedFont,
-} from '$entities/Font';
-import { getTypographySettingsStore } from '$features/AdjustTypography/model';
 import {
     Badge,
     ContentEditable,
@@ -18,6 +12,35 @@ 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 {
     /**
@@ -39,11 +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, status, text = $bindable(), index = 0 }: Props = $props();
-
-const typographySettingsStore = getTypographySettingsStore();
+let { font, status, text = $bindable(), index = 0, typography }: Props = $props();
 
 // Extract provider badge with fallback
 const providerBadge = $derived(
@@ -52,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>
 
@@ -73,7 +100,7 @@ const stats = $derived([
         min-h-60
         rounded-none
     "
-    style:font-weight={typographySettingsStore.weight}
+    style:font-weight={typography.weight}
 >
     <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
@@ -141,9 +168,9 @@ const stats = $derived([
         <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>
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/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/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index b6a63ed..4c16149 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -6,6 +6,7 @@
 -->
 <script lang="ts">
 import {
+    FontSampler,
     FontVirtualList,
     createFontRowSizeResolver,
     getFontCatalog,
@@ -15,7 +16,6 @@ import {
     TypographyMenu,
     getTypographySettingsStore,
 } from '$features/AdjustTypography';
-import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
 import { getLayoutManager } from '../../model';
@@ -127,7 +127,7 @@ const fontRowHeight = $derived.by(() =>
                 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} />
+            <FontSampler bind:text {font} {index} {status} typography={typographySettingsStore} />
         {/snippet}
     </FontVirtualList>
 
-- 
2.52.0


From a428eac3094b2ca27480b44870e14dd57688d320 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 08:45:36 +0300
Subject: [PATCH 57/67] docs: remove decorative separator comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Strip box-drawing (──) section dividers and ===/banner headers — visual
noise with no information. Where a divider label carried a non-obvious
why (VirtualList owns scrolling; mobile footer is md:hidden because header
stats take over) it is kept as a plain one-line comment; pure restatements
of the markup (Header bar, Red hover line, Bottom: fixed controls) are
dropped. Single comment style, no fluff.
---
 src/entities/Font/testing/fonts.mock.ts                | 6 +-----
 src/entities/Font/testing/index.ts                     | 5 +----
 src/entities/Font/ui/FontSampler/FontSampler.svelte    | 5 +----
 src/shared/lib/storybook/index.ts                      | 6 +-----
 src/shared/ui/ComboControl/ComboControl.svelte         | 6 ++++--
 src/shared/ui/SidebarContainer/SidebarContainer.svelte | 4 ++--
 src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte   | 4 +---
 7 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/entities/Font/testing/fonts.mock.ts b/src/entities/Font/testing/fonts.mock.ts
index 344c554..0cf45fa 100644
--- a/src/entities/Font/testing/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
diff --git a/src/entities/Font/testing/index.ts b/src/entities/Font/testing/index.ts
index 20219f5..d82a724 100644
--- a/src/entities/Font/testing/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
diff --git a/src/entities/Font/ui/FontSampler/FontSampler.svelte b/src/entities/Font/ui/FontSampler/FontSampler.svelte
index bf019e8..98e82d5 100644
--- a/src/entities/Font/ui/FontSampler/FontSampler.svelte
+++ b/src/entities/Font/ui/FontSampler/FontSampler.svelte
@@ -102,7 +102,6 @@ const stats = $derived([
     "
     style:font-weight={typography.weight}
 >
-    <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
         class="
             flex items-center justify-between
@@ -163,7 +162,6 @@ 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} {status}>
             <ContentEditable
@@ -175,7 +173,7 @@ const stats = $derived([
         </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' : ''}">
@@ -187,7 +185,6 @@ const stats = $derived([
         {/each}
     </div>
 
-    <!-- ── Red hover line ─────────────────────────────────────────────── -->
     <div
         class="
             absolute bottom-0 left-0 right-0
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/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 99eae67..12ae9f8 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -84,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/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/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index 74b1661..bb270bc 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
@@ -52,7 +52,6 @@ const side = $derived<Side>(comparisonStore.side);
         className,
     )}
 >
-    <!-- ── Header: title + A/B toggle ────────────────────────────────── -->
     <div
         class="
             p-6 shrink-0
@@ -96,14 +95,13 @@ const side = $derived<Side>(comparisonStore.side);
         </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="
-- 
2.52.0


From 5eb458eabb63ad4325a7cfa2f8dd537328e5329b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 08:57:04 +0300
Subject: [PATCH 58/67] refactor(ComparisonView): import typography store via
 root barrel

comparisonStore reached getTypographySettingsStore through
$features/AdjustTypography/model (deep, past the public API) while the
catalog/lifecycle accessors already go through the $entities/Font root
barrel. Re-path to $features/AdjustTypography so all three composed-store
imports go through public APIs uniformly. Direction was always legal
(widget -> feature, downward); this only closes the deep-import
inconsistency.

Consolidate the spec mock onto the root module accordingly and drop the
now-dead /model mock.
---
 .../model/stores/comparisonStore.svelte.ts        |  2 +-
 .../model/stores/comparisonStore.test.ts          | 15 ++++++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 4be6115..1f2bb28 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -26,7 +26,7 @@ import {
 import {
     type TypographySettingsStore,
     getTypographySettingsStore,
-} from '$features/AdjustTypography/model';
+} from '$features/AdjustTypography';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index b151733..021193a 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -84,6 +84,12 @@ vi.mock('$entities/Font/model', async importOriginal => {
     };
 });
 
+const mockTypography = vi.hoisted(() => ({
+    weight: 400,
+    renderedSize: 48,
+    reset: vi.fn(),
+}));
+
 vi.mock('$features/AdjustTypography', () => ({
     DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [],
     createTypographyControlManager: vi.fn(() => ({
@@ -91,15 +97,6 @@ vi.mock('$features/AdjustTypography', () => ({
         renderedSize: 48,
         reset: vi.fn(),
     })),
-}));
-
-const mockTypography = vi.hoisted(() => ({
-    weight: 400,
-    renderedSize: 48,
-    reset: vi.fn(),
-}));
-
-vi.mock('$features/AdjustTypography/model', () => ({
     getTypographySettingsStore: () => mockTypography,
 }));
 
-- 
2.52.0


From f0736f4d35576c0df0c4be646cf621e13f37354c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 09:39:51 +0300
Subject: [PATCH 59/67] feat(shared): add createSingleton lazy-singleton
 accessor helper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Standardizes the getX() / __resetX() pattern hand-rolled identically across
every store: lazy construction on first get(), memoized thereafter, and a
reset() that runs an optional teardown (e.g. destroy()) and clears so the
next get() rebuilds. Lazy by construction, so owning modules stay inert at
import. Covered by unit tests (laziness, memoization, rebuild-after-reset,
teardown-once-with-live-instance, reset-before-get no-op, falsy-value
caching).

Not yet adopted by the stores — that migration is a separate step.
---
 .../createSingleton/createSingleton.test.ts   | 86 +++++++++++++++++++
 .../createSingleton/createSingleton.ts        | 57 ++++++++++++
 src/shared/lib/helpers/index.ts               | 14 +++
 3 files changed, 157 insertions(+)
 create mode 100644 src/shared/lib/helpers/createSingleton/createSingleton.test.ts
 create mode 100644 src/shared/lib/helpers/createSingleton/createSingleton.ts

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/index.ts b/src/shared/lib/helpers/index.ts
index bba4aa4..17207d7 100644
--- a/src/shared/lib/helpers/index.ts
+++ b/src/shared/lib/helpers/index.ts
@@ -137,6 +137,20 @@ 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
-- 
2.52.0


From ded9606c30a68856c6e5cd2484c324998d09910d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:00:21 +0300
Subject: [PATCH 60/67] fix(shared): give createPersistentStore a destroy() to
 dispose its effect.root
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The store created an $effect.root for the save-on-change sync but returned no
disposer, so the effect leaked for the life of the process — contradicting
the rule that $effect.root owners must expose destroy(). Capture and expose
the disposer.

- add destroy() to the returned store; covered by tests (flushSync proves the
  save effect runs before destroy and stops after)
- trim the bloated header (two near-duplicate @example blocks) to one concise
  JSDoc — no fluff
- update typographySettings test mocks to satisfy the now-required destroy()

Consumers (LayoutManager, ThemeManager, typographySettings, comparisonStore)
do not yet call it — threading + the createSingleton migration follow.
---
 .../typographySettingsStore.test.ts           |  3 +
 .../createPersistentStore.svelte.ts           | 84 +++++--------------
 .../createPersistentStore.test.ts             | 36 ++++++++
 3 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
index 5d99eb5..4b81e47 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
@@ -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/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();
+        });
+    });
 });
-- 
2.52.0


From 0aae710e35c0ad505434671f94b2660bed3c69cc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:16:47 +0300
Subject: [PATCH 61/67] fix: dispose persistent-store effects; close
 comparisonStore effect leak
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thread the new createPersistentStore.destroy() through its owners so the
save effect.root is actually torn down: LayoutManager gains destroy();
ThemeManager and typographySettings dispose their #store in their existing
destroy().

comparisonStore had its own leak — a constructor $effect.root whose disposer
was discarded, and a module-level persistent storage created at import. Move
storage into the instance (#storage, created lazily per instance), capture
the effect.root disposer, add destroy(), and adopt createSingleton so reset
runs resetAll() + destroy(). Re-export createSingleton from the $shared/lib
barrel; give the test storage mock a destroy().
---
 .../typographySettingsStore.svelte.ts         |  1 +
 .../store/ThemeManager/ThemeManager.svelte.ts |  1 +
 src/shared/lib/index.ts                       |  2 +
 .../model/stores/comparisonStore.svelte.ts    | 63 ++++++++++++-------
 .../model/stores/comparisonStore.test.ts      |  2 +
 .../stores/layoutStore/layoutStore.svelte.ts  |  7 +++
 6 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index e0c4224..9960c9f 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -166,6 +166,7 @@ export class TypographySettingsStore {
      */
     destroy(): void {
         this.#disposeEffects();
+        this.#storage.destroy();
     }
 
     /**
diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
index 271063f..78ba77d 100644
--- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
+++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
@@ -125,6 +125,7 @@ class ThemeManager {
     destroy(): void {
         this.#mediaQuery?.removeEventListener('change', this.#systemChangeHandler);
         this.#mediaQuery = null;
+        this.#store.destroy();
     }
 
     /**
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
index 0e52af8..918a4d5 100644
--- a/src/shared/lib/index.ts
+++ b/src/shared/lib/index.ts
@@ -11,6 +11,7 @@ export {
     createPersistentStore,
     createPerspectiveManager,
     createResponsiveManager,
+    createSingleton,
     createVirtualizer,
     type Entity,
     type EntityStore,
@@ -21,6 +22,7 @@ export {
     type Property,
     type ResponsiveManager,
     responsiveManager,
+    type Singleton,
     type VirtualItem,
     type Virtualizer,
     type VirtualizerOptions,
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 1f2bb28..546e221 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -27,7 +27,10 @@ import {
     type TypographySettingsStore,
     getTypographySettingsStore,
 } from '$features/AdjustTypography';
-import { createPersistentStore } from '$shared/lib';
+import {
+    createPersistentStore,
+    createSingleton,
+} from '$shared/lib';
 import { untrack } from 'svelte';
 import { getPretextFontString } from '../../lib';
 
@@ -56,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.
  *
@@ -106,16 +103,27 @@ export class ComparisonStore {
     #typography: TypographySettingsStore;
 
     #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;
@@ -123,7 +131,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) {
@@ -178,7 +186,7 @@ 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) {
@@ -194,7 +202,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]);
                 });
             });
@@ -279,7 +287,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,
         };
@@ -363,19 +371,28 @@ export class ComparisonStore {
         this.#fontA = undefined;
         this.#fontB = undefined;
         this.#fontsByIdsStore.setIds([]);
-        storage.clear();
+        this.#storage.clear();
         this.#typography.reset();
     }
+
+    /**
+     * Disposes reactive effects and the persistent store. Call on teardown.
+     */
+    destroy() {
+        this.#disposeEffects();
+        this.#storage.destroy();
+    }
 }
 
-let _comparisonStore: ComparisonStore | undefined;
+const comparisonStore = createSingleton(
+    () => new ComparisonStore(),
+    instance => {
+        instance.resetAll();
+        instance.destroy();
+    },
+);
 
-export function getComparisonStore(): ComparisonStore {
-    return (_comparisonStore ??= new ComparisonStore());
-}
+export const getComparisonStore = comparisonStore.get;
 
-// test-only reset, so specs don't share a live observer
-export function __resetComparisonStore() {
-    _comparisonStore?.resetAll();
-    _comparisonStore = undefined;
-}
+// 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 021193a..1132c65 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -46,6 +46,8 @@ const mockStorage = vi.hoisted(() => {
         configurable: true,
     });
 
+    storage.destroy = vi.fn();
+
     return storage;
 });
 
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
index b40a19c..f9c8189 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
@@ -144,6 +144,13 @@ 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();
+    }
 }
 
 let _layoutManager: LayoutManager | undefined;
-- 
2.52.0


From fe07c60dd43f4b801e22cc95dc8c2a48baa153d8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:22:41 +0300
Subject: [PATCH 62/67] refactor: adopt createSingleton across the remaining
 stores

Replace the hand-rolled let _x / getX / __resetX boilerplate with the
createSingleton helper in all nine remaining singleton stores. Exposed
accessor names (getX, __resetX) are unchanged, so consumers and specs are
unaffected. Teardown wired to each stores destroy() where it has one
(fontCatalog, fontLifecycle, typography, availableFilter, theme, layout,
scrollBreadcrumbs); sort and appliedFilter have no teardown. Also merges
layoutStores duplicate $shared/lib imports.
---
 .../fontCatalogStore.svelte.ts                | 15 +++++++------
 .../fontLifecycleManager.svelte.ts            | 17 +++++++--------
 .../typographySettingsStore.svelte.ts         | 20 +++++++-----------
 .../store/scrollBreadcrumbsStore.svelte.ts    | 18 ++++++++--------
 .../store/ThemeManager/ThemeManager.svelte.ts | 18 +++++++---------
 .../appliedFilterStore.svelte.ts              | 21 ++++++++++---------
 .../availableFilterStore.svelte.ts            | 17 +++++++--------
 .../model/store/sortStore/sortStore.svelte.ts | 14 ++++++-------
 .../stores/layoutStore/layoutStore.svelte.ts  | 19 ++++++++---------
 9 files changed, 74 insertions(+), 85 deletions(-)

diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
index ceff630..4d2b96c 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -3,6 +3,7 @@ import {
     DEFAULT_QUERY_STALE_TIME_MS,
     getQueryClient,
 } from '$shared/api/queryClient';
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
 import {
     type InfiniteData,
     InfiniteQueryObserver,
@@ -483,14 +484,12 @@ export class FontCatalogStore {
     }
 }
 
-let _catalog: FontCatalogStore | undefined;
+const catalog = createSingleton(
+    () => new FontCatalogStore({ limit: 50 }),
+    instance => instance.destroy(),
+);
 
-export function getFontCatalog(): FontCatalogStore {
-    return (_catalog ??= new FontCatalogStore({ limit: 50 }));
-}
+export const getFontCatalog = catalog.get;
 
 // test-only reset, so specs don't share a live observer
-export function __resetFontCatalog() {
-    _catalog?.destroy();
-    _catalog = undefined;
-}
+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 f159a82..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,
@@ -419,18 +420,16 @@ export class FontLifecycleManager {
     }
 }
 
-let _fontLifecycleManager: FontLifecycleManager | undefined;
-
 /**
  * App-wide font lifecycle manager, created on first access. Lazy so its
  * AbortController / FontFace bookkeeping isn't set up at module load.
  */
-export function getFontLifecycleManager(): FontLifecycleManager {
-    return (_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 function __resetFontLifecycleManager() {
-    _fontLifecycleManager?.destroy();
-    _fontLifecycleManager = undefined;
-}
+export const __resetFontLifecycleManager = fontLifecycleManager.reset;
diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 9960c9f..dff832c 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -19,6 +19,7 @@ import {
 import {
     type PersistentStore,
     createPersistentStore,
+    createSingleton,
 } from '$shared/lib';
 import type { NumericControl } from '$shared/ui';
 import { SvelteMap } from 'svelte/reactivity';
@@ -349,22 +350,17 @@ export function createTypographySettingsStore(
 
 export type TypographySettingsStoreInstance = ReturnType<typeof createTypographySettingsStore>;
 
-let _typographySettingsStore: TypographySettingsStoreInstance | undefined;
-
 /**
  * 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 function getTypographySettingsStore(): TypographySettingsStoreInstance {
-    return (_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 function __resetTypographySettingsStore() {
-    _typographySettingsStore?.destroy();
-    _typographySettingsStore = undefined;
-}
+export const __resetTypographySettingsStore = typographySettingsStore.reset;
diff --git a/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts b/src/features/Breadcrumb/model/store/scrollBreadcrumbsStore.svelte.ts
index 4183428..a44906e 100644
--- a/src/features/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
  *
@@ -279,17 +281,15 @@ export function createScrollBreadcrumbsStore(): ScrollBreadcrumbsStore {
     return new ScrollBreadcrumbsStore();
 }
 
-let _scrollBreadcrumbsStore: ScrollBreadcrumbsStore | undefined;
-
 /**
  * App-wide scroll breadcrumbs store, created on first access.
  */
-export function getScrollBreadcrumbsStore(): ScrollBreadcrumbsStore {
-    return (_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 function __resetScrollBreadcrumbsStore() {
-    _scrollBreadcrumbsStore?.destroy();
-    _scrollBreadcrumbsStore = undefined;
-}
+export const __resetScrollBreadcrumbsStore = scrollBreadcrumbsStore.reset;
diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
index 78ba77d..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';
 
@@ -195,23 +198,18 @@ class ThemeManager {
     }
 }
 
-let _themeManager: ThemeManager | undefined;
-
 /**
  * App-wide theme manager, created on first access.
  *
  * Lazy so its persistent-store subscription isn't set up at module load.
  * Call init() on mount and destroy() on unmount (see Layout).
  */
-export function getThemeManager(): ThemeManager {
-    return (_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 function __resetThemeManager() {
-    _themeManager?.destroy();
-    _themeManager = undefined;
-}
+export const __resetThemeManager = themeManager.reset;
 
 /**
  * ThemeManager class exported for testing purposes
diff --git a/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
index 522dd3d..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,
@@ -129,8 +132,6 @@ export function createAppliedFilterStore<TValue extends string>(config: FilterCo
 
 export type AppliedFilterStore = ReturnType<typeof createAppliedFilterStore>;
 
-let _appliedFilterStore: AppliedFilterStore | undefined;
-
 /**
  * App-wide filter manager, created on first access.
  *
@@ -138,14 +139,14 @@ let _appliedFilterStore: AppliedFilterStore | undefined;
  * lives in `./bindings.svelte` and populates groups once backend filter
  * metadata arrives.
  */
-export function getAppliedFilterStore(): AppliedFilterStore {
-    return (_appliedFilterStore ??= createAppliedFilterStore<string>({
+const appliedFilterStore = createSingleton(() =>
+    createAppliedFilterStore<string>({
         queryValue: '',
         groups: [],
-    }));
-}
+    })
+);
+
+export const getAppliedFilterStore = appliedFilterStore.get;
 
 // test-only reset, so specs don't share filter/selection state
-export function __resetAppliedFilterStore() {
-    _appliedFilterStore = undefined;
-}
+export const __resetAppliedFilterStore = appliedFilterStore.reset;
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 02d2c3f..f11b276 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -22,6 +22,7 @@ import {
     DEFAULT_QUERY_STALE_TIME_MS,
     getQueryClient,
 } from '$shared/api/queryClient';
+import { createSingleton } from '$shared/lib/helpers/createSingleton/createSingleton';
 import {
     type QueryKey,
     QueryObserver,
@@ -126,18 +127,16 @@ export class AvailableFilterStore {
     }
 }
 
-let _availableFilterStore: AvailableFilterStore | undefined;
-
 /**
  * App-wide filter-metadata store, created on first access. Lazy so the
  * QueryObserver isn't constructed at module load.
  */
-export function getAvailableFilterStore(): AvailableFilterStore {
-    return (_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 function __resetAvailableFilterStore() {
-    _availableFilterStore?.destroy();
-    _availableFilterStore = undefined;
-}
+export const __resetAvailableFilterStore = availableFilterStore.reset;
diff --git a/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
index 5d2a8ca..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.
  *
@@ -46,16 +48,12 @@ export function createSortStore(initial: SortOption = 'Popularity') {
 
 export type SortStore = ReturnType<typeof createSortStore>;
 
-let _sortStore: SortStore | undefined;
-
 /**
  * App-wide sort store, created on first access.
  */
-export function getSortStore(): SortStore {
-    return (_sortStore ??= createSortStore());
-}
+const sortStore = createSingleton(() => createSortStore());
+
+export const getSortStore = sortStore.get;
 
 // test-only reset, so specs don't share selection state
-export function __resetSortStore() {
-    _sortStore = undefined;
-}
+export const __resetSortStore = sortStore.reset;
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
index f9c8189..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';
 
@@ -153,20 +156,16 @@ class LayoutManager {
     }
 }
 
-let _layoutManager: LayoutManager | undefined;
-
 /**
  * App-wide layout manager, created on first access. Lazy so its persisted
  * layout preference isn't read at module load.
  */
-export function getLayoutManager(): LayoutManager {
-    return (_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 function __resetLayoutManager() {
-    _layoutManager = undefined;
-}
+export const __resetLayoutManager = layoutManager.reset;
 
 // Export class for testing purposes
 export { LayoutManager };
-- 
2.52.0


From ec488cf1ce4bd7fd460d86c7350f4cf8bb8e22a8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:26:00 +0300
Subject: [PATCH 63/67] docs(ComparisonView): document the injected store
 fields

#fontCatalog / #typography / #lifecycle lacked the per-field doc the rest
of the class uses.
---
 .../model/stores/comparisonStore.svelte.ts           | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 546e221..04967ad 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -97,11 +97,17 @@ 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.
-- 
2.52.0


From 99ab7e9e08f4644632e5dd8e8cd044720211e67a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:36:15 +0300
Subject: [PATCH 64/67] refactor(shared/ui): stop deep-importing sibling
 config/types (C-3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Badge and TechText reached into $shared/ui/Label/config, and SearchBar into
$shared/ui/Input/types — bypassing the siblings public surface.

- Label/config.ts was explicitly shared text-styling config, not Labels
  internals; relocate it to shared/ui/labelConfig.ts (a neutral peer module)
  and point Label/Badge/TechText at it relatively.
- inputIconSize is a consumer-facing map; export it from Input/index.ts so
  SearchBar imports it through the barrel alongside Input.
---
 src/shared/ui/Badge/Badge.svelte                  | 6 +++---
 src/shared/ui/Input/index.ts                      | 1 +
 src/shared/ui/Label/Label.svelte                  | 2 +-
 src/shared/ui/SearchBar/SearchBar.svelte          | 6 ++++--
 src/shared/ui/TechText/TechText.svelte            | 4 ++--
 src/shared/ui/{Label/config.ts => labelConfig.ts} | 0
 6 files changed, 11 insertions(+), 8 deletions(-)
 rename src/shared/ui/{Label/config.ts => labelConfig.ts} (100%)

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/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/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/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/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
-- 
2.52.0


From c09ca93f4ecbfe598b521d5814cbe0797a64792c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 10:52:29 +0300
Subject: [PATCH 65/67] perf(test): stop typographySettings pulling @tanstack
 for four constants

typographySettingsStore (and its spec) imported DEFAULT_FONT_* from the
$entities/Font root barrel, which re-exports FontVirtualList -> stores ->
@tanstack/query-core. Under Vitest (no tree-shaking) that loaded the entire
UI + TanStack graph just to read four constants.

Import them from the pure $entities/Font/model/const/const module instead.
Deep path is deliberate: it pulls only the constants, not the entity store
graph. Mitigates the test-side cost of audit D-1 (root barrel not yet
inert); the structural fix (inject stores into FontVirtualList) stays
parked.
---
 .../typographySettingsStore.svelte.ts                        | 5 ++++-
 .../typographySettingsStore/typographySettingsStore.test.ts  | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index dff832c..22576a9 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -15,7 +15,10 @@ import {
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-} 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 PersistentStore,
     createPersistentStore,
diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
index 4b81e47..cbb0390 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
@@ -6,7 +6,7 @@ import {
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
-} from '$entities/Font';
+} from '$entities/Font/model/const/const';
 import {
     beforeEach,
     describe,
-- 
2.52.0


From 724b00d3d5ec9f5a6b5e5ead3567f82d18447c24 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 11:45:13 +0300
Subject: [PATCH 66/67] test(layoutStore): silence expected warn in
 invalid-JSON case

The "defaults to list mode when localStorage has invalid data" test feeds
invalid JSON on purpose; createPersistentStore logs and swallows the parse
error, so its warning (with stack) was polluting CI output. Spy on
console.warn to silence it and assert it fired, matching the equivalent
test in createPersistentStore.test.ts.
---
 .../SampleList/model/stores/layoutStore/layoutStore.test.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
index 8b7bcc0..b96ea16 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
@@ -7,6 +7,7 @@ import {
     describe,
     expect,
     it,
+    vi,
 } from 'vitest';
 
 // Helper to flush Svelte effects (they run in microtasks)
@@ -69,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 () => {
-- 
2.52.0


From eafe89b31335db22b703c3fdc93990c6d701691a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Wed, 3 Jun 2026 12:50:03 +0300
Subject: [PATCH 67/67] test: change old test to work with new grapheme split
 mechanism

---
 e2e/preview-text.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 }) => {
-- 
2.52.0