From 1573950605b7bc99a2e9f24e53a7be966d3a8f66 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 13:54:15 +0300
Subject: [PATCH 01/29] chore(Font): move batchFontStore to separate directory

---
 .../store/{ => batchFontStore}/batchFontStore.svelte.ts     | 6 +++---
 .../model/store/{ => batchFontStore}/batchFontStore.test.ts | 4 ++--
 src/entities/Font/model/store/index.ts                      | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename src/entities/Font/model/store/{ => batchFontStore}/batchFontStore.svelte.ts (94%)
 rename src/entities/Font/model/store/{ => batchFontStore}/batchFontStore.test.ts (97%)

diff --git a/src/entities/Font/model/store/batchFontStore.svelte.ts b/src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts
similarity index 94%
rename from src/entities/Font/model/store/batchFontStore.svelte.ts
rename to src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts
index 79a4846..7b0e9fe 100644
--- a/src/entities/Font/model/store/batchFontStore.svelte.ts
+++ b/src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts
@@ -3,12 +3,12 @@ import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore.svelte';
 import {
     fetchFontsByIds,
     seedFontCache,
-} from '../../api/proxy/proxyFonts';
+} from '../../../api/proxy/proxyFonts';
 import {
     FontNetworkError,
     FontResponseError,
-} from '../../lib/errors/errors';
-import type { UnifiedFont } from '../../model/types';
+} from '../../../lib/errors/errors';
+import type { UnifiedFont } from '../../types';
 
 /**
  * Internal fetcher that seeds the cache and handles error wrapping.
diff --git a/src/entities/Font/model/store/batchFontStore.test.ts b/src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts
similarity index 97%
rename from src/entities/Font/model/store/batchFontStore.test.ts
rename to src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts
index 2045d9d..3b112ac 100644
--- a/src/entities/Font/model/store/batchFontStore.test.ts
+++ b/src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts
@@ -7,11 +7,11 @@ import {
     it,
     vi,
 } from 'vitest';
-import * as api from '../../api/proxy/proxyFonts';
+import * as api from '../../../api/proxy/proxyFonts';
 import {
     FontNetworkError,
     FontResponseError,
-} from '../../lib/errors/errors';
+} from '../../../lib/errors/errors';
 import { BatchFontStore } from './batchFontStore.svelte';
 
 describe('BatchFontStore', () => {
diff --git a/src/entities/Font/model/store/index.ts b/src/entities/Font/model/store/index.ts
index 3ef8061..48dd140 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -2,7 +2,7 @@
 export * from './appliedFontsStore/appliedFontsStore.svelte';
 
 // Batch font store
-export { BatchFontStore } from './batchFontStore.svelte';
+export { BatchFontStore } from './batchFontStore/batchFontStore.svelte';
 
 // Single FontStore
 export {
-- 
2.52.0


From e60309af780d8b0de2184dbf81d20e0f9bdfc68a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:05:28 +0300
Subject: [PATCH 02/29] =?UTF-8?q?refactor(GetFonts):=20centralize=20filter?=
 =?UTF-8?q?Manager/sortStore=20=E2=86=92=20fontStore=20bridge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the duplicated $effect blocks that mapped filterManager and sortStore
into fontStore params out of Search, FontSearch and FilterControls into a
single $effect.root in features/GetFonts/model/state/bindings.svelte.ts.

Consumers now bind to the manager/store directly; the bridge is installed
once via a side-effect import from the feature barrel.
---
 src/features/GetFonts/model/index.ts          |  6 ++++
 .../GetFonts/model/state/bindings.svelte.ts   | 36 +++++++++++++++++++
 .../ui/FiltersControl/FilterControls.svelte   | 11 +-----
 .../ComparisonView/ui/Search/Search.svelte    | 15 ++------
 .../ui/FontSearch/FontSearch.svelte           |  8 -----
 5 files changed, 46 insertions(+), 30 deletions(-)
 create mode 100644 src/features/GetFonts/model/state/bindings.svelte.ts

diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index 2c8f3c8..d3ed458 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -29,6 +29,12 @@ export {
     filterManager,
 } from './state/manager.svelte';
 
+/**
+ * Side-effect import: installs the global filterManager+sortStore → fontStore
+ * bridge on first import of this feature barrel. No exports.
+ */
+import './state/bindings.svelte';
+
 /**
  * Sorting logic
  */
diff --git a/src/features/GetFonts/model/state/bindings.svelte.ts b/src/features/GetFonts/model/state/bindings.svelte.ts
new file mode 100644
index 0000000..c5f4905
--- /dev/null
+++ b/src/features/GetFonts/model/state/bindings.svelte.ts
@@ -0,0 +1,36 @@
+/**
+ * Bridges feature-level UI state (filterManager + sortStore) to the
+ * entity-level fontStore query params.
+ *
+ * Centralizing this here means consumers (Search, FontSearch,
+ * FilterControls, etc.) bind to the manager/store directly without
+ * each repeating the same mapping effect. The bridge is a singleton
+ * concern — it tracks singleton state and writes to a singleton query
+ * observer, so it lives at module scope, not in any individual widget.
+ */
+
+import { fontStore } from '$entities/Font';
+import { untrack } from 'svelte';
+import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
+import { sortStore } from '../store/sortStore.svelte';
+import { filterManager } from './manager.svelte';
+
+$effect.root(() => {
+    /**
+     * Mirror filter selections + debounced search query into fontStore params.
+     * untrack the write so fontStore's internal $state reads don't feed back
+     * into this effect's dependency graph.
+     */
+    $effect(() => {
+        const params = mapManagerToParams(filterManager);
+        untrack(() => fontStore.setParams(params));
+    });
+
+    /**
+     * Mirror sort selection into fontStore.
+     */
+    $effect(() => {
+        const apiSort = sortStore.apiValue;
+        untrack(() => fontStore.setSort(apiSort));
+    });
+});
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
index 5187324..e9af16b 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
@@ -4,16 +4,12 @@
     Sits below the filter list, separated by a top border.
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import { Button } from '$shared/ui';
 import { Label } from '$shared/ui';
 import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
-import {
-    getContext,
-    untrack,
-} from 'svelte';
+import { getContext } from 'svelte';
 import {
     SORT_OPTIONS,
     filterManager,
@@ -31,11 +27,6 @@ const {
     class: className,
 }: Props = $props();
 
-$effect(() => {
-    const apiSort = sortStore.apiValue;
-    untrack(() => fontStore.setSort(apiSort));
-});
-
 const responsive = getContext<ResponsiveManager>('responsive');
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index 305b12b..c496a1d 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -1,21 +1,12 @@
 <!--
     Component: Search
     Typeface search input for the comparison view.
-    Updates the global filterManager query to filter the font list.
+    Writes through filterManager; the global bridge in $features/GetFonts
+    propagates the value into fontStore.
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
-import {
-    filterManager,
-    mapManagerToParams,
-} from '$features/GetFonts';
+import { filterManager } from '$features/GetFonts';
 import { SearchBar } from '$shared/ui';
-import { untrack } from 'svelte';
-
-$effect(() => {
-    const params = mapManagerToParams(filterManager);
-    untrack(() => fontStore.setParams(params));
-});
 </script>
 
 <div class="p-6 border-b border-black/5">
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 30c6ca4..9b2fc73 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -3,12 +3,10 @@
     Provides a search input and filtration for fonts
 -->
 <script lang="ts">
-import { fontStore } from '$entities/Font';
 import {
     FilterControls,
     Filters,
     filterManager,
-    mapManagerToParams,
 } from '$features/GetFonts';
 import { springySlideFade } from '$shared/lib';
 import {
@@ -16,7 +14,6 @@ import {
     SearchBar,
 } from '$shared/ui';
 import SlidersHorizontalIcon from '@lucide/svelte/icons/sliders-horizontal';
-import { untrack } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import {
     Tween,
@@ -34,11 +31,6 @@ interface Props {
 
 let { showFilters = $bindable(true) }: Props = $props();
 
-$effect(() => {
-    const params = mapManagerToParams(filterManager);
-    untrack(() => fontStore.setParams(params));
-});
-
 const transform = new Tween(
     { scale: 1, rotate: 0 },
     { duration: 250, easing: cubicOut },
-- 
2.52.0


From 33d3429060601dd3cdbaf006ca3f40d32f7ed504 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:08:54 +0300
Subject: [PATCH 03/29] refactor(GetFonts): consolidate filtersStore wiring
 into bindings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the filtersStore → filterManager.setGroups $effect.root out of
manager.svelte.ts into bindings.svelte.ts so all cross-store reactive
wiring for the feature lives in one place. manager.svelte.ts now only
constructs and exports the singleton.
---
 .../GetFonts/model/state/bindings.svelte.ts   | 25 ++++++++++++++
 .../GetFonts/model/state/manager.svelte.ts    | 33 +++----------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/features/GetFonts/model/state/bindings.svelte.ts b/src/features/GetFonts/model/state/bindings.svelte.ts
index c5f4905..ab17a10 100644
--- a/src/features/GetFonts/model/state/bindings.svelte.ts
+++ b/src/features/GetFonts/model/state/bindings.svelte.ts
@@ -13,9 +13,34 @@ import { fontStore } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
 import { sortStore } from '../store/sortStore.svelte';
+import { filtersStore } from './filters.svelte';
 import { filterManager } from './manager.svelte';
 
 $effect.root(() => {
+    /**
+     * Populate filterManager groups when backend filter metadata resolves.
+     * filtersStore is async; until it loads, filterManager has empty groups
+     * and the UI renders nothing for them.
+     */
+    $effect(() => {
+        const dynamicFilters = filtersStore.filters;
+
+        if (dynamicFilters.length > 0) {
+            filterManager.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,
+                    })),
+                })),
+            );
+        }
+    });
+
     /**
      * Mirror filter selections + debounced search query into fontStore params.
      * untrack the write so fontStore's internal $state reads don't feed back
diff --git a/src/features/GetFonts/model/state/manager.svelte.ts b/src/features/GetFonts/model/state/manager.svelte.ts
index 143e045..ed495dc 100644
--- a/src/features/GetFonts/model/state/manager.svelte.ts
+++ b/src/features/GetFonts/model/state/manager.svelte.ts
@@ -1,39 +1,14 @@
 /**
- * Filter manager singleton
+ * Filter manager singleton.
  *
- * Creates filterManager with empty groups initially, then reactively
- * populates groups when filtersStore loads data from backend.
+ * Constructed with empty groups; the filtersStore → filterManager wiring
+ * lives in `./bindings.svelte` and populates groups once the backend
+ * filter metadata arrives.
  */
 
 import { createFilterManager } from '../../lib/filterManager/filterManager.svelte';
-import { filtersStore } from './filters.svelte';
 
 export const filterManager = createFilterManager({
     queryValue: '',
     groups: [],
 });
-
-/**
- * Reactively sync backend filter metadata into filterManager groups.
- * When filtersStore.filters resolves, setGroups replaces the empty groups.
- */
-$effect.root(() => {
-    $effect(() => {
-        const dynamicFilters = filtersStore.filters;
-
-        if (dynamicFilters.length > 0) {
-            filterManager.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,
-                    })),
-                })),
-            );
-        }
-    });
-});
-- 
2.52.0


From cb8f6ffc974f8c9fb0ee4820b0425c2217ff3629 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:23:25 +0300
Subject: [PATCH 04/29] refactor(GetFonts): unify filterManager factory +
 singleton under model/state

Merge the factory previously in lib/filterManager/ with the singleton
previously in model/state/manager.svelte.ts into a single
model/state/filterManager/ slice. The factory builds stateful runes-backed
objects, so it belongs alongside the singleton in model/, not in lib/.

lib/ now contains only the pure mapManagerToParams transform.
Public barrel signature unchanged.
---
 src/features/GetFonts/index.ts                | 22 ++++++++++------
 src/features/GetFonts/lib/index.ts            |  5 ----
 .../GetFonts/lib/mapper/mapManagerToParams.ts |  2 +-
 src/features/GetFonts/model/index.ts          | 10 +++++++-
 .../GetFonts/model/state/bindings.svelte.ts   |  2 +-
 .../filterManager/filterManager.svelte.ts     | 25 +++++++++++++++----
 .../filterManager/filterManager.test.ts       |  0
 .../GetFonts/model/state/manager.svelte.ts    | 14 -----------
 8 files changed, 45 insertions(+), 35 deletions(-)
 rename src/features/GetFonts/{lib => model/state}/filterManager/filterManager.svelte.ts (82%)
 rename src/features/GetFonts/{lib => model/state}/filterManager/filterManager.test.ts (100%)
 delete mode 100644 src/features/GetFonts/model/state/manager.svelte.ts

diff --git a/src/features/GetFonts/index.ts b/src/features/GetFonts/index.ts
index a57bb5f..5784ac7 100644
--- a/src/features/GetFonts/index.ts
+++ b/src/features/GetFonts/index.ts
@@ -1,19 +1,25 @@
+export { mapManagerToParams } from './lib';
+
 export {
+    /**
+     * Filter Manager
+     */
     createFilterManager,
     type FilterManager,
-    mapManagerToParams,
-} from './lib';
-
-export { filtersStore } from './model/state/filters.svelte';
-export { filterManager } from './model/state/manager.svelte';
-
-export {
+    filterManager,
+    /**
+     * Filter Store
+     */
+    filtersStore,
+    /**
+     * Sort Store
+     */
     SORT_MAP,
     SORT_OPTIONS,
     type SortApiValue,
     type SortOption,
     sortStore,
-} from './model/store/sortStore.svelte';
+} from './model';
 
 export {
     FilterControls,
diff --git a/src/features/GetFonts/lib/index.ts b/src/features/GetFonts/lib/index.ts
index e271659..1b7ac28 100644
--- a/src/features/GetFonts/lib/index.ts
+++ b/src/features/GetFonts/lib/index.ts
@@ -1,6 +1 @@
-export {
-    createFilterManager,
-    type FilterManager,
-} from './filterManager/filterManager.svelte';
-
 export { mapManagerToParams } from './mapper/mapManagerToParams';
diff --git a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts b/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
index c016683..1f7581f 100644
--- a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
+++ b/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
@@ -1,5 +1,5 @@
 import type { ProxyFontsParams } from '$entities/Font/api';
-import type { FilterManager } from '../filterManager/filterManager.svelte';
+import type { FilterManager } from '../../model';
 
 /**
  * Maps filter manager to proxy API parameters.
diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index d3ed458..bb81d5d 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -23,11 +23,19 @@ export {
  * Main filter controller
  */
 export {
+    /**
+     * Factory for constructing a filter manager instance
+     */
+    createFilterManager,
+    /**
+     * Reactive interface returned by `createFilterManager`
+     */
+    type FilterManager,
     /**
      * High-level manager for syncing search and filters
      */
     filterManager,
-} from './state/manager.svelte';
+} from './state/filterManager/filterManager.svelte';
 
 /**
  * Side-effect import: installs the global filterManager+sortStore → fontStore
diff --git a/src/features/GetFonts/model/state/bindings.svelte.ts b/src/features/GetFonts/model/state/bindings.svelte.ts
index ab17a10..b1351eb 100644
--- a/src/features/GetFonts/model/state/bindings.svelte.ts
+++ b/src/features/GetFonts/model/state/bindings.svelte.ts
@@ -13,8 +13,8 @@ import { fontStore } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
 import { sortStore } from '../store/sortStore.svelte';
+import { filterManager } from './filterManager/filterManager.svelte';
 import { filtersStore } from './filters.svelte';
-import { filterManager } from './manager.svelte';
 
 $effect.root(() => {
     /**
diff --git a/src/features/GetFonts/lib/filterManager/filterManager.svelte.ts b/src/features/GetFonts/model/state/filterManager/filterManager.svelte.ts
similarity index 82%
rename from src/features/GetFonts/lib/filterManager/filterManager.svelte.ts
rename to src/features/GetFonts/model/state/filterManager/filterManager.svelte.ts
index 4857efc..af4879c 100644
--- a/src/features/GetFonts/lib/filterManager/filterManager.svelte.ts
+++ b/src/features/GetFonts/model/state/filterManager/filterManager.svelte.ts
@@ -1,9 +1,12 @@
 /**
- * Filter manager for font filtering
+ * Filter manager factory and singleton.
  *
- * Manages multiple filter groups (providers, categories, subsets)
- * with debounced search input. Provides reactive state for filter
- * selections and convenience methods for bulk operations.
+ * Owns multiple filter groups (providers, categories, subsets) plus a
+ * debounced search input. Provides reactive state for filter selections
+ * and convenience methods for bulk operations.
+ *
+ * The factory (`createFilterManager`) is exported for tests; the app
+ * consumes the `filterManager` singleton at the bottom of this file.
  *
  * @example
  * ```ts
@@ -25,7 +28,7 @@ import { createDebouncedState } from '$shared/lib/helpers';
 import type {
     FilterConfig,
     FilterGroupConfig,
-} from '../../model';
+} from '../../types/filter';
 
 /**
  * Creates a filter manager instance
@@ -123,3 +126,15 @@ export function createFilterManager<TValue extends string>(config: FilterConfig<
 }
 
 export type FilterManager = ReturnType<typeof createFilterManager>;
+
+/**
+ * App-wide filter manager singleton.
+ *
+ * Constructed with empty groups; the filtersStore → filterManager wiring
+ * lives in `./bindings.svelte` and populates groups once backend filter
+ * metadata arrives.
+ */
+export const filterManager = createFilterManager({
+    queryValue: '',
+    groups: [],
+});
diff --git a/src/features/GetFonts/lib/filterManager/filterManager.test.ts b/src/features/GetFonts/model/state/filterManager/filterManager.test.ts
similarity index 100%
rename from src/features/GetFonts/lib/filterManager/filterManager.test.ts
rename to src/features/GetFonts/model/state/filterManager/filterManager.test.ts
diff --git a/src/features/GetFonts/model/state/manager.svelte.ts b/src/features/GetFonts/model/state/manager.svelte.ts
deleted file mode 100644
index ed495dc..0000000
--- a/src/features/GetFonts/model/state/manager.svelte.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Filter manager singleton.
- *
- * Constructed with empty groups; the filtersStore → filterManager wiring
- * lives in `./bindings.svelte` and populates groups once the backend
- * filter metadata arrives.
- */
-
-import { createFilterManager } from '../../lib/filterManager/filterManager.svelte';
-
-export const filterManager = createFilterManager({
-    queryValue: '',
-    groups: [],
-});
-- 
2.52.0


From 30621c33dffdfd33fde260690f948cf9871f100a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:33:26 +0300
Subject: [PATCH 05/29] refactor(GetFonts): consolidate model/state into
 model/store

Align the slice with the project-wide convention (entities/Font,
entities/Breadcrumb, features/ChangeAppTheme all use model/store/;
CLAUDE.md spec calls for store/). Move bindings, filters, and the
filterManager subdir out of the now-removed model/state/ directory.
---
 src/features/GetFonts/model/index.ts                        | 6 +++---
 .../GetFonts/model/{state => store}/bindings.svelte.ts      | 2 +-
 .../{state => store}/filterManager/filterManager.svelte.ts  | 0
 .../{state => store}/filterManager/filterManager.test.ts    | 0
 .../GetFonts/model/{state => store}/filters.svelte.ts       | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/features/GetFonts/model/{state => store}/bindings.svelte.ts (97%)
 rename src/features/GetFonts/model/{state => store}/filterManager/filterManager.svelte.ts (100%)
 rename src/features/GetFonts/model/{state => store}/filterManager/filterManager.test.ts (100%)
 rename src/features/GetFonts/model/{state => store}/filters.svelte.ts (100%)

diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index bb81d5d..f1b9d75 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -17,7 +17,7 @@ export {
      * Low-level property selection store
      */
     filtersStore,
-} from './state/filters.svelte';
+} from './store/filters.svelte';
 
 /**
  * Main filter controller
@@ -35,13 +35,13 @@ export {
      * High-level manager for syncing search and filters
      */
     filterManager,
-} from './state/filterManager/filterManager.svelte';
+} from './store/filterManager/filterManager.svelte';
 
 /**
  * Side-effect import: installs the global filterManager+sortStore → fontStore
  * bridge on first import of this feature barrel. No exports.
  */
-import './state/bindings.svelte';
+import './store/bindings.svelte';
 
 /**
  * Sorting logic
diff --git a/src/features/GetFonts/model/state/bindings.svelte.ts b/src/features/GetFonts/model/store/bindings.svelte.ts
similarity index 97%
rename from src/features/GetFonts/model/state/bindings.svelte.ts
rename to src/features/GetFonts/model/store/bindings.svelte.ts
index b1351eb..84ef8bb 100644
--- a/src/features/GetFonts/model/state/bindings.svelte.ts
+++ b/src/features/GetFonts/model/store/bindings.svelte.ts
@@ -12,9 +12,9 @@
 import { fontStore } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
-import { sortStore } from '../store/sortStore.svelte';
 import { filterManager } from './filterManager/filterManager.svelte';
 import { filtersStore } from './filters.svelte';
+import { sortStore } from './sortStore.svelte';
 
 $effect.root(() => {
     /**
diff --git a/src/features/GetFonts/model/state/filterManager/filterManager.svelte.ts b/src/features/GetFonts/model/store/filterManager/filterManager.svelte.ts
similarity index 100%
rename from src/features/GetFonts/model/state/filterManager/filterManager.svelte.ts
rename to src/features/GetFonts/model/store/filterManager/filterManager.svelte.ts
diff --git a/src/features/GetFonts/model/state/filterManager/filterManager.test.ts b/src/features/GetFonts/model/store/filterManager/filterManager.test.ts
similarity index 100%
rename from src/features/GetFonts/model/state/filterManager/filterManager.test.ts
rename to src/features/GetFonts/model/store/filterManager/filterManager.test.ts
diff --git a/src/features/GetFonts/model/state/filters.svelte.ts b/src/features/GetFonts/model/store/filters.svelte.ts
similarity index 100%
rename from src/features/GetFonts/model/state/filters.svelte.ts
rename to src/features/GetFonts/model/store/filters.svelte.ts
-- 
2.52.0


From 3a327e2d92b5035bea1158f77a0432342116dbaa Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 15:45:07 +0300
Subject: [PATCH 06/29] refactor(GetFonts): tighten mapManagerToParams + add
 coverage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collapse the three duplicated getGroup/map/length-guard chains into a
single selectedIn helper. Drop the unnecessary `as string[]` casts —
Property<TValue extends string>.value already yields string at the call
site.

Add unit tests covering empty query, populated query, missing group,
empty group, single + multi selection, unknown group ids, and the
combined param shape.
---
 .../lib/mapper/mapManagerToParams.test.ts     | 127 ++++++++++++++++++
 .../GetFonts/lib/mapper/mapManagerToParams.ts |  29 ++--
 2 files changed, 139 insertions(+), 17 deletions(-)
 create mode 100644 src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts

diff --git a/src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts b/src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts
new file mode 100644
index 0000000..8bb73c0
--- /dev/null
+++ b/src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts
@@ -0,0 +1,127 @@
+import type { Property } from '$shared/lib';
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { createFilterManager } from '../../model/store/filterManager/filterManager.svelte';
+import { mapManagerToParams } from './mapManagerToParams';
+
+/**
+ * Build a Property with explicit selection state.
+ */
+function prop(value: string, selected = false): Property<string> {
+    return { id: value, name: value, value, selected };
+}
+
+/**
+ * Build a filter group with a known id and a list of (value, selected) entries.
+ */
+function group(id: string, props: Array<[string, boolean]>) {
+    return {
+        id,
+        label: id,
+        properties: props.map(([value, selected]) => prop(value, selected)),
+    };
+}
+
+describe('mapManagerToParams', () => {
+    describe('search query', () => {
+        it('omits q when query is empty', () => {
+            const manager = createFilterManager({ queryValue: '', groups: [] });
+            expect(mapManagerToParams(manager).q).toBeUndefined();
+        });
+
+        it('passes the debounced query through as q', () => {
+            // Constructor seeds both immediate and debounced synchronously.
+            const manager = createFilterManager({ queryValue: 'roboto', groups: [] });
+            expect(mapManagerToParams(manager).q).toBe('roboto');
+        });
+    });
+
+    describe('group selections', () => {
+        it('omits a group entirely when no group with that id exists', () => {
+            const manager = createFilterManager({ queryValue: '', groups: [] });
+            const params = mapManagerToParams(manager);
+            expect(params.providers).toBeUndefined();
+            expect(params.categories).toBeUndefined();
+            expect(params.subsets).toBeUndefined();
+        });
+
+        it('omits a group when it exists but has no selections', () => {
+            const manager = createFilterManager({
+                queryValue: '',
+                groups: [group('providers', [['google', false], ['fontshare', false]])],
+            });
+            expect(mapManagerToParams(manager).providers).toBeUndefined();
+        });
+
+        it('returns the selected values for a single group', () => {
+            const manager = createFilterManager({
+                queryValue: '',
+                groups: [group('providers', [['google', true], ['fontshare', false]])],
+            });
+            expect(mapManagerToParams(manager).providers).toEqual(['google']);
+        });
+
+        it('returns multiple selected values in selection order', () => {
+            const manager = createFilterManager({
+                queryValue: '',
+                groups: [
+                    group('categories', [
+                        ['serif', true],
+                        ['sans-serif', false],
+                        ['display', true],
+                        ['monospace', true],
+                    ]),
+                ],
+            });
+            expect(mapManagerToParams(manager).categories).toEqual(['serif', 'display', 'monospace']);
+        });
+
+        it('maps each of the three recognized group ids independently', () => {
+            const manager = createFilterManager({
+                queryValue: '',
+                groups: [
+                    group('providers', [['google', true]]),
+                    group('categories', [['serif', true], ['sans-serif', true]]),
+                    group('subsets', [['latin', true]]),
+                ],
+            });
+            const params = mapManagerToParams(manager);
+            expect(params.providers).toEqual(['google']);
+            expect(params.categories).toEqual(['serif', 'sans-serif']);
+            expect(params.subsets).toEqual(['latin']);
+        });
+
+        it('ignores groups whose id does not match providers/categories/subsets', () => {
+            const manager = createFilterManager({
+                queryValue: '',
+                groups: [group('weights', [['400', true], ['700', true]])],
+            });
+            const params = mapManagerToParams(manager);
+            expect(params.providers).toBeUndefined();
+            expect(params.categories).toBeUndefined();
+            expect(params.subsets).toBeUndefined();
+        });
+    });
+
+    describe('combined output', () => {
+        it('produces a complete param object when query and selections coexist', () => {
+            const manager = createFilterManager({
+                queryValue: 'inter',
+                groups: [
+                    group('providers', [['google', true]]),
+                    group('categories', [['sans-serif', true]]),
+                    group('subsets', [['latin', false]]),
+                ],
+            });
+            expect(mapManagerToParams(manager)).toEqual({
+                q: 'inter',
+                providers: ['google'],
+                categories: ['sans-serif'],
+                subsets: undefined,
+            });
+        });
+    });
+});
diff --git a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts b/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
index 1f7581f..6153bd2 100644
--- a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
+++ b/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
@@ -29,25 +29,20 @@ import type { FilterManager } from '../../model';
  * ```
  */
 export function mapManagerToParams(manager: FilterManager): Partial<ProxyFontsParams> {
-    const providers = manager.getGroup('providers')?.instance.selectedProperties.map(p => p.value);
-    const categories = manager.getGroup('categories')?.instance.selectedProperties.map(p => p.value);
-    const subsets = manager.getGroup('subsets')?.instance.selectedProperties.map(p => p.value);
+    /**
+     * Return the list of selected values for a group, or undefined when
+     * the group is missing or has no selection — matches the API's
+     * "omit empty filters" contract.
+     */
+    const selectedIn = (id: string): string[] | undefined => {
+        const values = manager.getGroup(id)?.instance.selectedProperties.map(p => p.value);
+        return values && values.length > 0 ? values : undefined;
+    };
 
     return {
-        // Search query (debounced)
         q: manager.debouncedQueryValue || undefined,
-
-        // NEW: Support arrays - send all selected values
-        providers: providers && providers.length > 0
-            ? providers as string[]
-            : undefined,
-
-        categories: categories && categories.length > 0
-            ? categories as string[]
-            : undefined,
-
-        subsets: subsets && subsets.length > 0
-            ? subsets as string[]
-            : undefined,
+        providers: selectedIn('providers'),
+        categories: selectedIn('categories'),
+        subsets: selectedIn('subsets'),
     };
 }
-- 
2.52.0


From cc218934f48fd1f62342851d5802a5e089660d02 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 16:05:59 +0300
Subject: [PATCH 07/29] fix(ComparisonView): update batchFontStore import path
 in test

Dynamic import inside the vi.mock('$entities/Font') factory was missed
when batchFontStore was relocated into its own subdirectory in 1573950.
Restores the previously-failing comparisonStore test suite (9 tests) and
clears the lingering TS error in svelte-check.
---
 src/widgets/ComparisonView/model/stores/comparisonStore.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index 775f922..72a3cec 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -54,7 +54,7 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
 vi.mock('$entities/Font', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font')>();
     const { BatchFontStore } = await import(
-        '$entities/Font/model/store/batchFontStore.svelte'
+        '$entities/Font/model/store/batchFontStore/batchFontStore.svelte'
     );
     return {
         ...actual,
-- 
2.52.0


From b6494a8cb50310b37d42fad5f3f8432579a9b9c0 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 17:49:26 +0300
Subject: [PATCH 08/29] test(GetFonts): cover filters and sortStore + nest each
 in its own dir
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Export createSortStore and FiltersStore so per-test instances can be
constructed without sharing singleton state. Add unit tests covering:

- sortStore: default + custom init, display→API value mapping, set()
  idempotency, singleton shape
- filters: empty initial state, fetch population, single-call dedup,
  error path, cached-fetch reuse across observers

Group each store with its tests under its own directory to match the
filterManager layout.
---
 src/features/GetFonts/model/index.ts          |   4 +-
 .../GetFonts/model/store/bindings.svelte.ts   |   4 +-
 .../store/{ => filters}/filters.svelte.ts     |   2 +-
 .../model/store/filters/filters.test.ts       | 116 ++++++++++++++++++
 .../store/{ => sortStore}/sortStore.svelte.ts |   2 +-
 .../model/store/sortStore/sortStore.test.ts   |  68 ++++++++++
 6 files changed, 190 insertions(+), 6 deletions(-)
 rename src/features/GetFonts/model/store/{ => filters}/filters.svelte.ts (99%)
 create mode 100644 src/features/GetFonts/model/store/filters/filters.test.ts
 rename src/features/GetFonts/model/store/{ => sortStore}/sortStore.svelte.ts (94%)
 create mode 100644 src/features/GetFonts/model/store/sortStore/sortStore.test.ts

diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index f1b9d75..0c91b4f 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -17,7 +17,7 @@ export {
      * Low-level property selection store
      */
     filtersStore,
-} from './store/filters.svelte';
+} from './store/filters/filters.svelte';
 
 /**
  * Main filter controller
@@ -67,4 +67,4 @@ export {
      * Reactive store for the current sort selection
      */
     sortStore,
-} from './store/sortStore.svelte';
+} from './store/sortStore/sortStore.svelte';
diff --git a/src/features/GetFonts/model/store/bindings.svelte.ts b/src/features/GetFonts/model/store/bindings.svelte.ts
index 84ef8bb..cf98c2a 100644
--- a/src/features/GetFonts/model/store/bindings.svelte.ts
+++ b/src/features/GetFonts/model/store/bindings.svelte.ts
@@ -13,8 +13,8 @@ import { fontStore } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
 import { filterManager } from './filterManager/filterManager.svelte';
-import { filtersStore } from './filters.svelte';
-import { sortStore } from './sortStore.svelte';
+import { filtersStore } from './filters/filters.svelte';
+import { sortStore } from './sortStore/sortStore.svelte';
 
 $effect.root(() => {
     /**
diff --git a/src/features/GetFonts/model/store/filters.svelte.ts b/src/features/GetFonts/model/store/filters/filters.svelte.ts
similarity index 99%
rename from src/features/GetFonts/model/store/filters.svelte.ts
rename to src/features/GetFonts/model/store/filters/filters.svelte.ts
index 27e4aba..642ddc6 100644
--- a/src/features/GetFonts/model/store/filters.svelte.ts
+++ b/src/features/GetFonts/model/store/filters/filters.svelte.ts
@@ -31,7 +31,7 @@ import {
  * Fetches and caches filter metadata using fetchProxyFilters()
  * Provides reactive access to filter data
  */
-class FiltersStore {
+export class FiltersStore {
     /**
      * TanStack Query result state
      */
diff --git a/src/features/GetFonts/model/store/filters/filters.test.ts b/src/features/GetFonts/model/store/filters/filters.test.ts
new file mode 100644
index 0000000..5dad619
--- /dev/null
+++ b/src/features/GetFonts/model/store/filters/filters.test.ts
@@ -0,0 +1,116 @@
+import { queryClient } from '$shared/api/queryClient';
+import {
+    afterEach,
+    beforeEach,
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import * as filtersApi from '../../../api/filters/filters';
+import type { FilterMetadata } from '../../../api/filters/filters';
+import { FiltersStore } from './filters.svelte';
+
+/**
+ * Build a minimal FilterMetadata fixture for tests.
+ */
+function metadata(id: string, optionValues: string[] = []): FilterMetadata {
+    return {
+        id,
+        name: id,
+        description: '',
+        type: 'enum',
+        options: optionValues.map(value => ({
+            id: value,
+            name: value,
+            value,
+            count: 1,
+        })),
+    } as FilterMetadata;
+}
+
+describe('FiltersStore', () => {
+    let store: FiltersStore;
+
+    beforeEach(() => {
+        queryClient.clear();
+        // TanStack defaults retry=3 with exponential backoff, which would
+        // make the error-path test wait >5s. Disable for deterministic timing.
+        queryClient.setDefaultOptions({ queries: { retry: false } });
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        store?.destroy();
+    });
+
+    describe('initial state', () => {
+        it('starts with an empty filter list', () => {
+            vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
+            store = new FiltersStore();
+            expect(store.filters).toEqual([]);
+        });
+
+        it('reports null error before any failure', () => {
+            vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
+            store = new FiltersStore();
+            expect(store.error).toBeNull();
+        });
+    });
+
+    describe('successful fetch', () => {
+        it('populates filters with the fetched metadata', async () => {
+            const data = [
+                metadata('providers', ['google', 'fontshare']),
+                metadata('categories', ['serif', 'sans-serif']),
+            ];
+            vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue(data);
+
+            store = new FiltersStore();
+
+            await vi.waitFor(() => expect(store.filters).toEqual(data), { timeout: 1000 });
+            expect(store.isError).toBe(false);
+            expect(store.error).toBeNull();
+        });
+
+        it('calls fetchProxyFilters exactly once for the initial load', async () => {
+            const spy = vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
+            store = new FiltersStore();
+
+            await vi.waitFor(() => expect(spy).toHaveBeenCalledTimes(1), { timeout: 1000 });
+        });
+    });
+
+    describe('error handling', () => {
+        it('flips isError and exposes the error message on fetch failure', async () => {
+            vi.spyOn(filtersApi, 'fetchProxyFilters').mockRejectedValue(new Error('boom'));
+            store = new FiltersStore();
+
+            await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
+            expect(store.error).toBe('boom');
+            expect(store.filters).toEqual([]);
+        });
+    });
+
+    describe('caching', () => {
+        it('does not trigger a second fetch when another instance shares the query key', async () => {
+            const data = [metadata('providers', ['google'])];
+            const spy = vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue(data);
+
+            store = new FiltersStore();
+            await vi.waitFor(() => expect(store.filters).toEqual(data), { timeout: 1000 });
+            expect(spy).toHaveBeenCalledTimes(1);
+
+            // A second observer on the same query key should reuse the cached
+            // result rather than triggering a new request.
+            const second = new FiltersStore();
+            try {
+                // Give the new observer a tick to potentially refetch (it shouldn't).
+                await new Promise(r => setTimeout(r, 50));
+                expect(spy).toHaveBeenCalledTimes(1);
+            } finally {
+                second.destroy();
+            }
+        });
+    });
+});
diff --git a/src/features/GetFonts/model/store/sortStore.svelte.ts b/src/features/GetFonts/model/store/sortStore/sortStore.svelte.ts
similarity index 94%
rename from src/features/GetFonts/model/store/sortStore.svelte.ts
rename to src/features/GetFonts/model/store/sortStore/sortStore.svelte.ts
index 0a090c5..3a8908f 100644
--- a/src/features/GetFonts/model/store/sortStore.svelte.ts
+++ b/src/features/GetFonts/model/store/sortStore/sortStore.svelte.ts
@@ -17,7 +17,7 @@ export const SORT_MAP: Record<SortOption, 'name' | 'popularity' | 'lastModified'
 
 export type SortApiValue = (typeof SORT_MAP)[SortOption];
 
-function createSortStore(initial: SortOption = 'Popularity') {
+export function createSortStore(initial: SortOption = 'Popularity') {
     let current = $state<SortOption>(initial);
 
     return {
diff --git a/src/features/GetFonts/model/store/sortStore/sortStore.test.ts b/src/features/GetFonts/model/store/sortStore/sortStore.test.ts
new file mode 100644
index 0000000..fcdc41b
--- /dev/null
+++ b/src/features/GetFonts/model/store/sortStore/sortStore.test.ts
@@ -0,0 +1,68 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import {
+    SORT_MAP,
+    SORT_OPTIONS,
+    type SortOption,
+    createSortStore,
+    sortStore,
+} from './sortStore.svelte';
+
+describe('createSortStore', () => {
+    describe('initialization', () => {
+        it('defaults to Popularity when no initial value is provided', () => {
+            const store = createSortStore();
+            expect(store.value).toBe('Popularity');
+        });
+
+        it('accepts an explicit initial value', () => {
+            const store = createSortStore('Newest');
+            expect(store.value).toBe('Newest');
+        });
+    });
+
+    describe('apiValue mapping', () => {
+        it.each<[SortOption, (typeof SORT_MAP)[SortOption]]>([
+            ['Name', 'name'],
+            ['Popularity', 'popularity'],
+            ['Newest', 'lastModified'],
+        ])('maps %s to %s', (display, api) => {
+            const store = createSortStore(display);
+            expect(store.apiValue).toBe(api);
+        });
+    });
+
+    describe('set()', () => {
+        it('updates both value and apiValue together', () => {
+            const store = createSortStore('Name');
+            store.set('Newest');
+            expect(store.value).toBe('Newest');
+            expect(store.apiValue).toBe('lastModified');
+        });
+
+        it('is idempotent — setting the current value keeps state consistent', () => {
+            const store = createSortStore('Popularity');
+            store.set('Popularity');
+            expect(store.value).toBe('Popularity');
+        });
+    });
+});
+
+describe('sortStore singleton', () => {
+    it('exposes the same shape as a factory instance', () => {
+        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', () => {
+        for (const option of SORT_OPTIONS) {
+            sortStore.set(option);
+            expect(sortStore.value).toBe(option);
+            expect(sortStore.apiValue).toBe(SORT_MAP[option]);
+        }
+    });
+});
-- 
2.52.0


From e0d39d861fdc94d3d498dda5069404c9c7040a86 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 18:08:05 +0300
Subject: [PATCH 09/29] refactor(GetFonts): rename filters/filterManager to
 available/appliedFilterStore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 'filters' + 'filterManager' pair didn't reveal the schema-vs-selection
split. Rename to reflect the actual roles:

- FiltersStore / filtersStore       → AvailableFilterStore / availableFilterStore
- createFilterManager / FilterManager → createAppliedFilterStore / AppliedFilterStore
- filterManager singleton            → appliedFilterStore
- mapManagerToParams                 → mapAppliedFiltersToParams

Directories and file basenames follow the new singleton names. Public
barrel signature updated; all consumers (Search, FontSearch, Filters,
FilterControls) point at the new identifiers.
---
 src/features/GetFonts/index.ts                |  16 +--
 src/features/GetFonts/lib/index.ts            |   2 +-
 ...t.ts => mapAppliedFiltersToParams.test.ts} |  42 +++----
 ...Params.ts => mapAppliedFiltersToParams.ts} |   6 +-
 src/features/GetFonts/model/index.ts          |  22 ++--
 .../appliedFilterStore.svelte.ts}             |  14 +--
 .../appliedFilterStore.test.ts}               | 108 +++++++++---------
 .../availableFilterStore.svelte.ts}           |  12 +-
 .../availableFilterStore.test.ts}             |  20 ++--
 .../GetFonts/model/store/bindings.svelte.ts   |  18 +--
 .../ui/Filters/Filters.stories.svelte         |   2 +-
 .../GetFonts/ui/Filters/Filters.svelte        |   4 +-
 .../ui/Filters/Filters.svelte.test.ts         |  16 +--
 .../FilterControls.stories.svelte             |   2 +-
 .../ui/FiltersControl/FilterControls.svelte   |   4 +-
 .../ComparisonView/ui/Search/Search.svelte    |   6 +-
 .../ui/Search/Search.svelte.test.ts           |   8 +-
 .../ui/FontSearch/FontSearch.svelte           |   4 +-
 18 files changed, 153 insertions(+), 153 deletions(-)
 rename src/features/GetFonts/lib/mapper/{mapManagerToParams.test.ts => mapAppliedFiltersToParams.test.ts} (70%)
 rename src/features/GetFonts/lib/mapper/{mapManagerToParams.ts => mapAppliedFiltersToParams.ts} (86%)
 rename src/features/GetFonts/model/store/{filterManager/filterManager.svelte.ts => appliedFilterStore/appliedFilterStore.svelte.ts} (87%)
 rename src/features/GetFonts/model/store/{filterManager/filterManager.test.ts => appliedFilterStore/appliedFilterStore.test.ts} (88%)
 rename src/features/GetFonts/model/store/{filters/filters.svelte.ts => availableFilterStore/availableFilterStore.svelte.ts} (90%)
 rename src/features/GetFonts/model/store/{filters/filters.test.ts => availableFilterStore/availableFilterStore.test.ts} (88%)

diff --git a/src/features/GetFonts/index.ts b/src/features/GetFonts/index.ts
index 5784ac7..bd666a3 100644
--- a/src/features/GetFonts/index.ts
+++ b/src/features/GetFonts/index.ts
@@ -1,16 +1,16 @@
-export { mapManagerToParams } from './lib';
+export { mapAppliedFiltersToParams } from './lib';
 
 export {
-    /**
-     * Filter Manager
-     */
-    createFilterManager,
-    type FilterManager,
-    filterManager,
+    type AppliedFilterStore,
+    appliedFilterStore,
     /**
      * Filter Store
      */
-    filtersStore,
+    availableFilterStore,
+    /**
+     * Filter Manager
+     */
+    createAppliedFilterStore,
     /**
      * Sort Store
      */
diff --git a/src/features/GetFonts/lib/index.ts b/src/features/GetFonts/lib/index.ts
index 1b7ac28..1187ed3 100644
--- a/src/features/GetFonts/lib/index.ts
+++ b/src/features/GetFonts/lib/index.ts
@@ -1 +1 @@
-export { mapManagerToParams } from './mapper/mapManagerToParams';
+export { mapAppliedFiltersToParams } from './mapper/mapAppliedFiltersToParams';
diff --git a/src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts b/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
similarity index 70%
rename from src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts
rename to src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
index 8bb73c0..fb1d904 100644
--- a/src/features/GetFonts/lib/mapper/mapManagerToParams.test.ts
+++ b/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
@@ -4,8 +4,8 @@ import {
     expect,
     it,
 } from 'vitest';
-import { createFilterManager } from '../../model/store/filterManager/filterManager.svelte';
-import { mapManagerToParams } from './mapManagerToParams';
+import { createAppliedFilterStore } from '../../model/store/appliedFilterStore/appliedFilterStore.svelte';
+import { mapAppliedFiltersToParams } from './mapAppliedFiltersToParams';
 
 /**
  * Build a Property with explicit selection state.
@@ -25,47 +25,47 @@ function group(id: string, props: Array<[string, boolean]>) {
     };
 }
 
-describe('mapManagerToParams', () => {
+describe('mapAppliedFiltersToParams', () => {
     describe('search query', () => {
         it('omits q when query is empty', () => {
-            const manager = createFilterManager({ queryValue: '', groups: [] });
-            expect(mapManagerToParams(manager).q).toBeUndefined();
+            const manager = createAppliedFilterStore({ queryValue: '', groups: [] });
+            expect(mapAppliedFiltersToParams(manager).q).toBeUndefined();
         });
 
         it('passes the debounced query through as q', () => {
             // Constructor seeds both immediate and debounced synchronously.
-            const manager = createFilterManager({ queryValue: 'roboto', groups: [] });
-            expect(mapManagerToParams(manager).q).toBe('roboto');
+            const manager = createAppliedFilterStore({ queryValue: 'roboto', groups: [] });
+            expect(mapAppliedFiltersToParams(manager).q).toBe('roboto');
         });
     });
 
     describe('group selections', () => {
         it('omits a group entirely when no group with that id exists', () => {
-            const manager = createFilterManager({ queryValue: '', groups: [] });
-            const params = mapManagerToParams(manager);
+            const manager = createAppliedFilterStore({ queryValue: '', groups: [] });
+            const params = mapAppliedFiltersToParams(manager);
             expect(params.providers).toBeUndefined();
             expect(params.categories).toBeUndefined();
             expect(params.subsets).toBeUndefined();
         });
 
         it('omits a group when it exists but has no selections', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: '',
                 groups: [group('providers', [['google', false], ['fontshare', false]])],
             });
-            expect(mapManagerToParams(manager).providers).toBeUndefined();
+            expect(mapAppliedFiltersToParams(manager).providers).toBeUndefined();
         });
 
         it('returns the selected values for a single group', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: '',
                 groups: [group('providers', [['google', true], ['fontshare', false]])],
             });
-            expect(mapManagerToParams(manager).providers).toEqual(['google']);
+            expect(mapAppliedFiltersToParams(manager).providers).toEqual(['google']);
         });
 
         it('returns multiple selected values in selection order', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: '',
                 groups: [
                     group('categories', [
@@ -76,11 +76,11 @@ describe('mapManagerToParams', () => {
                     ]),
                 ],
             });
-            expect(mapManagerToParams(manager).categories).toEqual(['serif', 'display', 'monospace']);
+            expect(mapAppliedFiltersToParams(manager).categories).toEqual(['serif', 'display', 'monospace']);
         });
 
         it('maps each of the three recognized group ids independently', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: '',
                 groups: [
                     group('providers', [['google', true]]),
@@ -88,18 +88,18 @@ describe('mapManagerToParams', () => {
                     group('subsets', [['latin', true]]),
                 ],
             });
-            const params = mapManagerToParams(manager);
+            const params = mapAppliedFiltersToParams(manager);
             expect(params.providers).toEqual(['google']);
             expect(params.categories).toEqual(['serif', 'sans-serif']);
             expect(params.subsets).toEqual(['latin']);
         });
 
         it('ignores groups whose id does not match providers/categories/subsets', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: '',
                 groups: [group('weights', [['400', true], ['700', true]])],
             });
-            const params = mapManagerToParams(manager);
+            const params = mapAppliedFiltersToParams(manager);
             expect(params.providers).toBeUndefined();
             expect(params.categories).toBeUndefined();
             expect(params.subsets).toBeUndefined();
@@ -108,7 +108,7 @@ describe('mapManagerToParams', () => {
 
     describe('combined output', () => {
         it('produces a complete param object when query and selections coexist', () => {
-            const manager = createFilterManager({
+            const manager = createAppliedFilterStore({
                 queryValue: 'inter',
                 groups: [
                     group('providers', [['google', true]]),
@@ -116,7 +116,7 @@ describe('mapManagerToParams', () => {
                     group('subsets', [['latin', false]]),
                 ],
             });
-            expect(mapManagerToParams(manager)).toEqual({
+            expect(mapAppliedFiltersToParams(manager)).toEqual({
                 q: 'inter',
                 providers: ['google'],
                 categories: ['sans-serif'],
diff --git a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts b/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.ts
similarity index 86%
rename from src/features/GetFonts/lib/mapper/mapManagerToParams.ts
rename to src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.ts
index 6153bd2..d8b8739 100644
--- a/src/features/GetFonts/lib/mapper/mapManagerToParams.ts
+++ b/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.ts
@@ -1,5 +1,5 @@
 import type { ProxyFontsParams } from '$entities/Font/api';
-import type { FilterManager } from '../../model';
+import type { AppliedFilterStore } from '../../model';
 
 /**
  * Maps filter manager to proxy API parameters.
@@ -19,7 +19,7 @@ import type { FilterManager } from '../../model';
  * //   subsets: ['latin']
  * // }
  *
- * const params = mapManagerToParams(manager);
+ * const params = mapAppliedFiltersToParams(manager);
  * // Returns: {
  * //   providers: ['google', 'fontshare'],
  * //   categories: ['sans-serif', 'serif'],
@@ -28,7 +28,7 @@ import type { FilterManager } from '../../model';
  * // }
  * ```
  */
-export function mapManagerToParams(manager: FilterManager): Partial<ProxyFontsParams> {
+export function mapAppliedFiltersToParams(manager: AppliedFilterStore): Partial<ProxyFontsParams> {
     /**
      * Return the list of selected values for a group, or undefined when
      * the group is missing or has no selection — matches the API's
diff --git a/src/features/GetFonts/model/index.ts b/src/features/GetFonts/model/index.ts
index 0c91b4f..b37c7be 100644
--- a/src/features/GetFonts/model/index.ts
+++ b/src/features/GetFonts/model/index.ts
@@ -16,29 +16,29 @@ export {
     /**
      * Low-level property selection store
      */
-    filtersStore,
-} from './store/filters/filters.svelte';
+    availableFilterStore,
+} from './store/availableFilterStore/availableFilterStore.svelte';
 
 /**
  * Main filter controller
  */
 export {
     /**
-     * Factory for constructing a filter manager instance
+     * Reactive interface returned by `createAppliedFilterStore`
      */
-    createFilterManager,
-    /**
-     * Reactive interface returned by `createFilterManager`
-     */
-    type FilterManager,
+    type AppliedFilterStore,
     /**
      * High-level manager for syncing search and filters
      */
-    filterManager,
-} from './store/filterManager/filterManager.svelte';
+    appliedFilterStore,
+    /**
+     * Factory for constructing a filter manager instance
+     */
+    createAppliedFilterStore,
+} from './store/appliedFilterStore/appliedFilterStore.svelte';
 
 /**
- * Side-effect import: installs the global filterManager+sortStore → fontStore
+ * Side-effect import: installs the global appliedFilterStore+sortStore → fontStore
  * bridge on first import of this feature barrel. No exports.
  */
 import './store/bindings.svelte';
diff --git a/src/features/GetFonts/model/store/filterManager/filterManager.svelte.ts b/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
similarity index 87%
rename from src/features/GetFonts/model/store/filterManager/filterManager.svelte.ts
rename to src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
index af4879c..f2e8258 100644
--- a/src/features/GetFonts/model/store/filterManager/filterManager.svelte.ts
+++ b/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
@@ -5,12 +5,12 @@
  * debounced search input. Provides reactive state for filter selections
  * and convenience methods for bulk operations.
  *
- * The factory (`createFilterManager`) is exported for tests; the app
- * consumes the `filterManager` singleton at the bottom of this file.
+ * The factory (`createAppliedFilterStore`) is exported for tests; the app
+ * consumes the `appliedFilterStore` singleton at the bottom of this file.
  *
  * @example
  * ```ts
- * const manager = createFilterManager({
+ * const manager = createAppliedFilterStore({
  *     queryValue: '',
  *     groups: [
  *         { id: 'providers', label: 'Provider', properties: [...] },
@@ -39,7 +39,7 @@ import type {
  * @param config - Configuration with query value and filter groups
  * @returns Filter manager instance with reactive state and methods
  */
-export function createFilterManager<TValue extends string>(config: FilterConfig<TValue>) {
+export function createAppliedFilterStore<TValue extends string>(config: FilterConfig<TValue>) {
     const search = createDebouncedState(config.queryValue ?? '');
 
     // Create filter instances upfront
@@ -125,16 +125,16 @@ export function createFilterManager<TValue extends string>(config: FilterConfig<
     };
 }
 
-export type FilterManager = ReturnType<typeof createFilterManager>;
+export type AppliedFilterStore = ReturnType<typeof createAppliedFilterStore>;
 
 /**
  * App-wide filter manager singleton.
  *
- * Constructed with empty groups; the filtersStore → filterManager wiring
+ * Constructed with empty groups; the availableFilterStore → appliedFilterStore wiring
  * lives in `./bindings.svelte` and populates groups once backend filter
  * metadata arrives.
  */
-export const filterManager = createFilterManager({
+export const appliedFilterStore = createAppliedFilterStore({
     queryValue: '',
     groups: [],
 });
diff --git a/src/features/GetFonts/model/store/filterManager/filterManager.test.ts b/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
similarity index 88%
rename from src/features/GetFonts/model/store/filterManager/filterManager.test.ts
rename to src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
index 731a011..c546ac1 100644
--- a/src/features/GetFonts/model/store/filterManager/filterManager.test.ts
+++ b/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
@@ -7,10 +7,10 @@ import {
     it,
     vi,
 } from 'vitest';
-import { createFilterManager } from './filterManager.svelte';
+import { createAppliedFilterStore } from './appliedFilterStore.svelte';
 
 /**
- * Test Suite for createFilterManager Helper Function
+ * Test Suite for createAppliedFilterStore Helper Function
  *
  * This suite tests the filter manager logic including:
  * - Debounced query state (immediate vs delayed)
@@ -54,9 +54,9 @@ function createTestGroups(count: number, propertiesPerGroup = 3) {
     }));
 }
 
-describe('createFilterManager - Initialization', () => {
+describe('createAppliedFilterStore - Initialization', () => {
     it('creates manager with empty query value', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(2),
         });
@@ -66,7 +66,7 @@ describe('createFilterManager - Initialization', () => {
     });
 
     it('creates manager with initial query value', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'search term',
             groups: createTestGroups(1),
         });
@@ -76,7 +76,7 @@ describe('createFilterManager - Initialization', () => {
     });
 
     it('creates manager with undefined query value (defaults to empty string)', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             groups: createTestGroups(1),
         });
 
@@ -86,7 +86,7 @@ describe('createFilterManager - Initialization', () => {
 
     it('creates filter groups for each config group', () => {
         const groups = createTestGroups(3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -99,7 +99,7 @@ describe('createFilterManager - Initialization', () => {
 
     it('creates filter instances for each group', () => {
         const groups = createTestGroups(2, 5);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -118,7 +118,7 @@ describe('createFilterManager - Initialization', () => {
             { id: 'providers', label: 'Providers', properties: createTestProperties(2) },
             { id: 'categories', label: 'Categories', properties: createTestProperties(3) },
         ];
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -129,7 +129,7 @@ describe('createFilterManager - Initialization', () => {
 
     it('handles single group', () => {
         const groups = createTestGroups(1);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -139,7 +139,7 @@ describe('createFilterManager - Initialization', () => {
     });
 });
 
-describe('createFilterManager - Debounced Query', () => {
+describe('createAppliedFilterStore - Debounced Query', () => {
     beforeEach(() => {
         vi.useFakeTimers();
     });
@@ -149,7 +149,7 @@ describe('createFilterManager - Debounced Query', () => {
     });
 
     it('immediate query value updates instantly', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -161,7 +161,7 @@ describe('createFilterManager - Debounced Query', () => {
     });
 
     it('debounced query value updates after default delay (300ms)', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -178,7 +178,7 @@ describe('createFilterManager - Debounced Query', () => {
     });
 
     it('rapid query changes reset the debounce timer', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -200,7 +200,7 @@ describe('createFilterManager - Debounced Query', () => {
     });
 
     it('handles empty string in query', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'initial',
             groups: createTestGroups(1),
         });
@@ -213,7 +213,7 @@ describe('createFilterManager - Debounced Query', () => {
     });
 
     it('preserves initial query value until changed', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'initial search',
             groups: createTestGroups(1),
         });
@@ -228,9 +228,9 @@ describe('createFilterManager - Debounced Query', () => {
     });
 });
 
-describe('createFilterManager - hasAnySelection Derived State', () => {
+describe('createAppliedFilterStore - hasAnySelection Derived State', () => {
     it('returns false when no filters are selected', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(3, 3),
         });
@@ -240,7 +240,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
 
     it('returns true when one filter in one group is selected', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -255,7 +255,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
 
     it('returns true when multiple filters across groups are selected', () => {
         const groups = createTestGroups(3, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -272,7 +272,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
 
     it('returns false after deselecting all filters', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -286,7 +286,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
 
     it('reacts to selection changes in individual groups', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -318,7 +318,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
                 properties: createTestProperties(3, []),
             },
         ];
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -331,7 +331,7 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
             { id: 'group-0', label: 'Group 0', properties: [] },
             { id: 'group-1', label: 'Group 1', properties: [] },
         ];
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -340,10 +340,10 @@ describe('createFilterManager - hasAnySelection Derived State', () => {
     });
 });
 
-describe('createFilterManager - getGroup() Method', () => {
+describe('createAppliedFilterStore - getGroup() Method', () => {
     it('returns the correct group by ID', () => {
         const groups = createTestGroups(3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -357,7 +357,7 @@ describe('createFilterManager - getGroup() Method', () => {
 
     it('returns undefined for non-existent group ID', () => {
         const groups = createTestGroups(2);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -369,7 +369,7 @@ describe('createFilterManager - getGroup() Method', () => {
 
     it('returns group with accessible filter instance', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -385,7 +385,7 @@ describe('createFilterManager - getGroup() Method', () => {
 
     it('returns first group when requested', () => {
         const groups = createTestGroups(3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -398,7 +398,7 @@ describe('createFilterManager - getGroup() Method', () => {
 
     it('returns last group when requested', () => {
         const groups = createTestGroups(5);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -410,10 +410,10 @@ describe('createFilterManager - getGroup() Method', () => {
     });
 });
 
-describe('createFilterManager - deselectAllGlobal() Method', () => {
+describe('createAppliedFilterStore - deselectAllGlobal() Method', () => {
     it('deselects all filters across all groups', () => {
         const groups = createTestGroups(3, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -436,7 +436,7 @@ describe('createFilterManager - deselectAllGlobal() Method', () => {
 
     it('handles deselecting when nothing is selected', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -453,7 +453,7 @@ describe('createFilterManager - deselectAllGlobal() Method', () => {
             { id: 'group-0', label: 'Group 0', properties: [] },
             { id: 'group-1', label: 'Group 1', properties: [] },
         ];
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -464,7 +464,7 @@ describe('createFilterManager - deselectAllGlobal() Method', () => {
 
     it('can select filters after global deselect', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -482,7 +482,7 @@ describe('createFilterManager - deselectAllGlobal() Method', () => {
 
     it('handles partially selected groups', () => {
         const groups = createTestGroups(3, 5);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -505,7 +505,7 @@ describe('createFilterManager - deselectAllGlobal() Method', () => {
     });
 });
 
-describe('createFilterManager - Complex Scenarios', () => {
+describe('createAppliedFilterStore - Complex Scenarios', () => {
     beforeEach(() => {
         vi.useFakeTimers();
     });
@@ -516,7 +516,7 @@ describe('createFilterManager - Complex Scenarios', () => {
 
     it('handles query changes and filter selections together', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -553,7 +553,7 @@ describe('createFilterManager - Complex Scenarios', () => {
             },
         ];
 
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -582,7 +582,7 @@ describe('createFilterManager - Complex Scenarios', () => {
 
     it('manages multiple independent filter groups correctly', () => {
         const groups = createTestGroups(4, 5);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -607,7 +607,7 @@ describe('createFilterManager - Complex Scenarios', () => {
 
     it('handles toggle operations via getGroup', () => {
         const groups = createTestGroups(2, 3);
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -623,9 +623,9 @@ describe('createFilterManager - Complex Scenarios', () => {
     });
 });
 
-describe('createFilterManager - Interface Compliance', () => {
+describe('createAppliedFilterStore - Interface Compliance', () => {
     it('exposes queryValue getter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'test',
             groups: createTestGroups(1),
         });
@@ -636,7 +636,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes queryValue setter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'test',
             groups: createTestGroups(1),
         });
@@ -647,7 +647,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes debouncedQueryValue getter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: 'test',
             groups: createTestGroups(1),
         });
@@ -658,7 +658,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes groups getter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -669,7 +669,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes hasAnySelection getter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -680,7 +680,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes getGroup method', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -689,7 +689,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('exposes deselectAllGlobal method', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -698,7 +698,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 
     it('does not expose debouncedQueryValue setter', () => {
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups: createTestGroups(1),
         });
@@ -708,7 +708,7 @@ describe('createFilterManager - Interface Compliance', () => {
     });
 });
 
-describe('createFilterManager - Edge Cases', () => {
+describe('createAppliedFilterStore - Edge Cases', () => {
     it('handles single property groups', () => {
         const groups: Array<{
             id: string;
@@ -722,7 +722,7 @@ describe('createFilterManager - Edge Cases', () => {
             },
         ];
 
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -749,7 +749,7 @@ describe('createFilterManager - Edge Cases', () => {
             },
         ];
 
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
@@ -773,7 +773,7 @@ describe('createFilterManager - Edge Cases', () => {
             },
         ];
 
-        const manager = createFilterManager({
+        const manager = createAppliedFilterStore({
             queryValue: '',
             groups,
         });
diff --git a/src/features/GetFonts/model/store/filters/filters.svelte.ts b/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
similarity index 90%
rename from src/features/GetFonts/model/store/filters/filters.svelte.ts
rename to src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 642ddc6..c4bebb7 100644
--- a/src/features/GetFonts/model/store/filters/filters.svelte.ts
+++ b/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -6,12 +6,12 @@
  *
  * @example
  * ```ts
- * import { filtersStore } from '$features/GetFonts';
+ * import { availableFilterStore } from '$features/GetFonts';
  *
  * // Access filters (reactive)
- * $: filters = filtersStore.filters;
- * $: isLoading = filtersStore.isLoading;
- * $: error = filtersStore.error;
+ * $: filters = availableFilterStore.filters;
+ * $: isLoading = availableFilterStore.isLoading;
+ * $: error = availableFilterStore.error;
  * ```
  */
 
@@ -31,7 +31,7 @@ import {
  * Fetches and caches filter metadata using fetchProxyFilters()
  * Provides reactive access to filter data
  */
-export class FiltersStore {
+export class AvailableFilterStore {
     /**
      * TanStack Query result state
      */
@@ -125,4 +125,4 @@ export class FiltersStore {
 /**
  * Singleton instance
  */
-export const filtersStore = new FiltersStore();
+export const availableFilterStore = new AvailableFilterStore();
diff --git a/src/features/GetFonts/model/store/filters/filters.test.ts b/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.test.ts
similarity index 88%
rename from src/features/GetFonts/model/store/filters/filters.test.ts
rename to src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.test.ts
index 5dad619..8f489d4 100644
--- a/src/features/GetFonts/model/store/filters/filters.test.ts
+++ b/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.test.ts
@@ -9,7 +9,7 @@ import {
 } from 'vitest';
 import * as filtersApi from '../../../api/filters/filters';
 import type { FilterMetadata } from '../../../api/filters/filters';
-import { FiltersStore } from './filters.svelte';
+import { AvailableFilterStore } from './availableFilterStore.svelte';
 
 /**
  * Build a minimal FilterMetadata fixture for tests.
@@ -29,8 +29,8 @@ function metadata(id: string, optionValues: string[] = []): FilterMetadata {
     } as FilterMetadata;
 }
 
-describe('FiltersStore', () => {
-    let store: FiltersStore;
+describe('AvailableFilterStore', () => {
+    let store: AvailableFilterStore;
 
     beforeEach(() => {
         queryClient.clear();
@@ -47,13 +47,13 @@ describe('FiltersStore', () => {
     describe('initial state', () => {
         it('starts with an empty filter list', () => {
             vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
             expect(store.filters).toEqual([]);
         });
 
         it('reports null error before any failure', () => {
             vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
             expect(store.error).toBeNull();
         });
     });
@@ -66,7 +66,7 @@ describe('FiltersStore', () => {
             ];
             vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue(data);
 
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
 
             await vi.waitFor(() => expect(store.filters).toEqual(data), { timeout: 1000 });
             expect(store.isError).toBe(false);
@@ -75,7 +75,7 @@ describe('FiltersStore', () => {
 
         it('calls fetchProxyFilters exactly once for the initial load', async () => {
             const spy = vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue([]);
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
 
             await vi.waitFor(() => expect(spy).toHaveBeenCalledTimes(1), { timeout: 1000 });
         });
@@ -84,7 +84,7 @@ describe('FiltersStore', () => {
     describe('error handling', () => {
         it('flips isError and exposes the error message on fetch failure', async () => {
             vi.spyOn(filtersApi, 'fetchProxyFilters').mockRejectedValue(new Error('boom'));
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
 
             await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
             expect(store.error).toBe('boom');
@@ -97,13 +97,13 @@ describe('FiltersStore', () => {
             const data = [metadata('providers', ['google'])];
             const spy = vi.spyOn(filtersApi, 'fetchProxyFilters').mockResolvedValue(data);
 
-            store = new FiltersStore();
+            store = new AvailableFilterStore();
             await vi.waitFor(() => expect(store.filters).toEqual(data), { timeout: 1000 });
             expect(spy).toHaveBeenCalledTimes(1);
 
             // A second observer on the same query key should reuse the cached
             // result rather than triggering a new request.
-            const second = new FiltersStore();
+            const second = new AvailableFilterStore();
             try {
                 // Give the new observer a tick to potentially refetch (it shouldn't).
                 await new Promise(r => setTimeout(r, 50));
diff --git a/src/features/GetFonts/model/store/bindings.svelte.ts b/src/features/GetFonts/model/store/bindings.svelte.ts
index cf98c2a..d1ff7c7 100644
--- a/src/features/GetFonts/model/store/bindings.svelte.ts
+++ b/src/features/GetFonts/model/store/bindings.svelte.ts
@@ -1,5 +1,5 @@
 /**
- * Bridges feature-level UI state (filterManager + sortStore) to the
+ * Bridges feature-level UI state (appliedFilterStore + sortStore) to the
  * entity-level fontStore query params.
  *
  * Centralizing this here means consumers (Search, FontSearch,
@@ -11,22 +11,22 @@
 
 import { fontStore } from '$entities/Font';
 import { untrack } from 'svelte';
-import { mapManagerToParams } from '../../lib/mapper/mapManagerToParams';
-import { filterManager } from './filterManager/filterManager.svelte';
-import { filtersStore } from './filters/filters.svelte';
+import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
+import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
+import { availableFilterStore } from './availableFilterStore/availableFilterStore.svelte';
 import { sortStore } from './sortStore/sortStore.svelte';
 
 $effect.root(() => {
     /**
-     * Populate filterManager groups when backend filter metadata resolves.
-     * filtersStore is async; until it loads, filterManager has empty groups
+     * 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 = filtersStore.filters;
+        const dynamicFilters = availableFilterStore.filters;
 
         if (dynamicFilters.length > 0) {
-            filterManager.setGroups(
+            appliedFilterStore.setGroups(
                 dynamicFilters.map(filter => ({
                     id: filter.id,
                     label: filter.name,
@@ -47,7 +47,7 @@ $effect.root(() => {
      * into this effect's dependency graph.
      */
     $effect(() => {
-        const params = mapManagerToParams(filterManager);
+        const params = mapAppliedFiltersToParams(appliedFilterStore);
         untrack(() => fontStore.setParams(params));
     });
 
diff --git a/src/features/GetFonts/ui/Filters/Filters.stories.svelte b/src/features/GetFonts/ui/Filters/Filters.stories.svelte
index 45add6f..8df9a74 100644
--- a/src/features/GetFonts/ui/Filters/Filters.stories.svelte
+++ b/src/features/GetFonts/ui/Filters/Filters.stories.svelte
@@ -9,7 +9,7 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Renders the full list of filter groups managed by filterManager. Each group maps to a collapsible FilterGroup with checkboxes. No props — reads directly from the filterManager singleton.',
+                    'Renders the full list of filter groups managed by appliedFilterStore. Each group maps to a collapsible FilterGroup with checkboxes. No props — reads directly from the appliedFilterStore singleton.',
             },
             story: { inline: false },
         },
diff --git a/src/features/GetFonts/ui/Filters/Filters.svelte b/src/features/GetFonts/ui/Filters/Filters.svelte
index 5c7749c..b993c48 100644
--- a/src/features/GetFonts/ui/Filters/Filters.svelte
+++ b/src/features/GetFonts/ui/Filters/Filters.svelte
@@ -4,10 +4,10 @@
 -->
 <script lang="ts">
 import { FilterGroup } from '$shared/ui';
-import { filterManager } from '../../model';
+import { appliedFilterStore } from '../../model';
 </script>
 
-{#each filterManager.groups as group (group.id)}
+{#each appliedFilterStore.groups as group (group.id)}
     <FilterGroup
         displayedLabel={group.label}
         filter={group.instance}
diff --git a/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts b/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts
index c879c4d..84a754e 100644
--- a/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts
+++ b/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts
@@ -1,6 +1,6 @@
 import {
-    filterManager,
-    filtersStore,
+    appliedFilterStore,
+    availableFilterStore,
 } from '$features/GetFonts';
 import {
     render,
@@ -11,9 +11,9 @@ import Filters from './Filters.svelte';
 
 describe('Filters', () => {
     beforeEach(() => {
-        // Clear groups and mock filtersStore to be empty so the auto-sync effect doesn't overwrite us
-        filterManager.setGroups([]);
-        vi.spyOn(filtersStore, 'filters', 'get').mockReturnValue([]);
+        // 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([]);
     });
 
     afterEach(() => {
@@ -28,7 +28,7 @@ describe('Filters', () => {
         });
 
         it('renders a label for each filter group', () => {
-            filterManager.setGroups([
+            appliedFilterStore.setGroups([
                 { id: 'cat', label: 'Categories', properties: [] },
                 { id: 'prov', label: 'Font Providers', properties: [] },
             ]);
@@ -38,7 +38,7 @@ describe('Filters', () => {
         });
 
         it('renders filter properties within groups', () => {
-            filterManager.setGroups([
+            appliedFilterStore.setGroups([
                 {
                     id: 'cat',
                     label: 'Category',
@@ -54,7 +54,7 @@ describe('Filters', () => {
         });
 
         it('renders multiple groups with their properties', () => {
-            filterManager.setGroups([
+            appliedFilterStore.setGroups([
                 {
                     id: 'cat',
                     label: 'Category',
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte
index e1643a6..f8b7c0a 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte
@@ -10,7 +10,7 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Sort options and Reset_Filters button rendered below the filter list. Reads sort state from sortStore and dispatches resets via filterManager. Requires responsive context — wrap with Providers.',
+                    'Sort options and Reset_Filters button rendered below the filter list. Reads sort state from sortStore and dispatches resets via appliedFilterStore. Requires responsive context — wrap with Providers.',
             },
             story: { inline: false },
         },
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
index e9af16b..f249f99 100644
--- a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
+++ b/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
@@ -12,7 +12,7 @@ import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
 import { getContext } from 'svelte';
 import {
     SORT_OPTIONS,
-    filterManager,
+    appliedFilterStore,
     sortStore,
 } from '../../model';
 
@@ -31,7 +31,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 
 function handleReset() {
-    filterManager.deselectAllGlobal();
+    appliedFilterStore.deselectAllGlobal();
 }
 </script>
 
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index c496a1d..d2b9162 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -1,11 +1,11 @@
 <!--
     Component: Search
     Typeface search input for the comparison view.
-    Writes through filterManager; the global bridge in $features/GetFonts
+    Writes through appliedFilterStore; the global bridge in $features/GetFonts
     propagates the value into fontStore.
 -->
 <script lang="ts">
-import { filterManager } from '$features/GetFonts';
+import { appliedFilterStore } from '$features/GetFonts';
 import { SearchBar } from '$shared/ui';
 </script>
 
@@ -15,7 +15,7 @@ import { SearchBar } from '$shared/ui';
         class="w-full"
         placeholder="Typeface Search"
         aria-label="Search typefaces"
-        bind:value={filterManager.queryValue}
+        bind:value={appliedFilterStore.queryValue}
         fullWidth
     />
 </div>
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts b/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts
index e5a89d2..4490af1 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 { filterManager } from '$features/GetFonts';
+import { appliedFilterStore } from '$features/GetFonts';
 import {
     render,
     screen,
@@ -7,7 +7,7 @@ import Search from './Search.svelte';
 
 describe('Search', () => {
     beforeEach(() => {
-        filterManager.queryValue = '';
+        appliedFilterStore.queryValue = '';
     });
 
     describe('Rendering', () => {
@@ -23,8 +23,8 @@ describe('Search', () => {
     });
 
     describe('Value binding', () => {
-        it('reflects filterManager.queryValue as initial value', () => {
-            filterManager.queryValue = 'Inter';
+        it('reflects appliedFilterStore.queryValue as initial value', () => {
+            appliedFilterStore.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 9b2fc73..07d25e5 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -6,7 +6,7 @@
 import {
     FilterControls,
     Filters,
-    filterManager,
+    appliedFilterStore,
 } from '$features/GetFonts';
 import { springySlideFade } from '$shared/lib';
 import {
@@ -58,7 +58,7 @@ function toggleFilters() {
             class="w-full"
             placeholder="Typeface Search"
             aria-label="Search typefaces"
-            bind:value={filterManager.queryValue}
+            bind:value={appliedFilterStore.queryValue}
             fullWidth
         />
 
-- 
2.52.0


From ca382fd43dd7ed6a1c533f93d689af2db41d389e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 18:16:16 +0300
Subject: [PATCH 10/29] refactor(features): rename GetFonts to
 FilterAndSortFonts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The feature does not fetch fonts — that lives in \$entities/Font's
fontStore. It owns the user's filter selections, sort preference, and
search-by-name query that drive the listing. The new name describes what
it actually does.

Directory + every \$features/GetFonts import path updated; no symbol
renames in this commit.
---
 .../{GetFonts => FilterAndSortFonts}/api/filters/filters.ts | 0
 src/features/{GetFonts => FilterAndSortFonts}/api/index.ts  | 0
 src/features/{GetFonts => FilterAndSortFonts}/index.ts      | 0
 src/features/{GetFonts => FilterAndSortFonts}/lib/index.ts  | 0
 .../lib/mapper/mapAppliedFiltersToParams.test.ts            | 0
 .../lib/mapper/mapAppliedFiltersToParams.ts                 | 0
 .../{GetFonts => FilterAndSortFonts}/model/const/const.ts   | 0
 .../{GetFonts => FilterAndSortFonts}/model/index.ts         | 0
 .../store/appliedFilterStore/appliedFilterStore.svelte.ts   | 0
 .../store/appliedFilterStore/appliedFilterStore.test.ts     | 0
 .../availableFilterStore/availableFilterStore.svelte.ts     | 6 +++---
 .../store/availableFilterStore/availableFilterStore.test.ts | 0
 .../model/store/bindings.svelte.ts                          | 0
 .../model/store/sortStore/sortStore.svelte.ts               | 0
 .../model/store/sortStore/sortStore.test.ts                 | 0
 .../{GetFonts => FilterAndSortFonts}/model/types/filter.ts  | 0
 .../ui/Filters/Filters.stories.svelte                       | 0
 .../ui/Filters/Filters.svelte                               | 0
 .../ui/Filters/Filters.svelte.test.ts                       | 2 +-
 .../ui/FiltersControl/FilterControls.stories.svelte         | 0
 .../ui/FiltersControl/FilterControls.svelte                 | 0
 src/features/{GetFonts => FilterAndSortFonts}/ui/index.ts   | 0
 src/widgets/ComparisonView/ui/Search/Search.svelte          | 4 ++--
 src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts  | 2 +-
 src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte      | 2 +-
 25 files changed, 8 insertions(+), 8 deletions(-)
 rename src/features/{GetFonts => FilterAndSortFonts}/api/filters/filters.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/api/index.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/index.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/lib/index.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/lib/mapper/mapAppliedFiltersToParams.test.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/lib/mapper/mapAppliedFiltersToParams.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/const/const.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/index.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/appliedFilterStore/appliedFilterStore.svelte.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/appliedFilterStore/appliedFilterStore.test.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/availableFilterStore/availableFilterStore.svelte.ts (91%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/availableFilterStore/availableFilterStore.test.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/bindings.svelte.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/sortStore/sortStore.svelte.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/store/sortStore/sortStore.test.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/model/types/filter.ts (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/Filters/Filters.stories.svelte (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/Filters/Filters.svelte (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/Filters/Filters.svelte.test.ts (98%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/FiltersControl/FilterControls.stories.svelte (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/FiltersControl/FilterControls.svelte (100%)
 rename src/features/{GetFonts => FilterAndSortFonts}/ui/index.ts (100%)

diff --git a/src/features/GetFonts/api/filters/filters.ts b/src/features/FilterAndSortFonts/api/filters/filters.ts
similarity index 100%
rename from src/features/GetFonts/api/filters/filters.ts
rename to src/features/FilterAndSortFonts/api/filters/filters.ts
diff --git a/src/features/GetFonts/api/index.ts b/src/features/FilterAndSortFonts/api/index.ts
similarity index 100%
rename from src/features/GetFonts/api/index.ts
rename to src/features/FilterAndSortFonts/api/index.ts
diff --git a/src/features/GetFonts/index.ts b/src/features/FilterAndSortFonts/index.ts
similarity index 100%
rename from src/features/GetFonts/index.ts
rename to src/features/FilterAndSortFonts/index.ts
diff --git a/src/features/GetFonts/lib/index.ts b/src/features/FilterAndSortFonts/lib/index.ts
similarity index 100%
rename from src/features/GetFonts/lib/index.ts
rename to src/features/FilterAndSortFonts/lib/index.ts
diff --git a/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.test.ts b/src/features/FilterAndSortFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
similarity index 100%
rename from src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
rename to src/features/FilterAndSortFonts/lib/mapper/mapAppliedFiltersToParams.test.ts
diff --git a/src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.ts b/src/features/FilterAndSortFonts/lib/mapper/mapAppliedFiltersToParams.ts
similarity index 100%
rename from src/features/GetFonts/lib/mapper/mapAppliedFiltersToParams.ts
rename to src/features/FilterAndSortFonts/lib/mapper/mapAppliedFiltersToParams.ts
diff --git a/src/features/GetFonts/model/const/const.ts b/src/features/FilterAndSortFonts/model/const/const.ts
similarity index 100%
rename from src/features/GetFonts/model/const/const.ts
rename to src/features/FilterAndSortFonts/model/const/const.ts
diff --git a/src/features/GetFonts/model/index.ts b/src/features/FilterAndSortFonts/model/index.ts
similarity index 100%
rename from src/features/GetFonts/model/index.ts
rename to src/features/FilterAndSortFonts/model/index.ts
diff --git a/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
similarity index 100%
rename from src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
rename to src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.svelte.ts
diff --git a/src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts b/src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
similarity index 100%
rename from src/features/GetFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
rename to src/features/FilterAndSortFonts/model/store/appliedFilterStore/appliedFilterStore.test.ts
diff --git a/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
similarity index 91%
rename from src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
rename to src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index c4bebb7..6aa3d6f 100644
--- a/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -6,7 +6,7 @@
  *
  * @example
  * ```ts
- * import { availableFilterStore } from '$features/GetFonts';
+ * import { availableFilterStore } from '$features/FilterAndSortFonts';
  *
  * // Access filters (reactive)
  * $: filters = availableFilterStore.filters;
@@ -15,8 +15,8 @@
  * ```
  */
 
-import { fetchProxyFilters } from '$features/GetFonts/api/filters/filters';
-import type { FilterMetadata } from '$features/GetFonts/api/filters/filters';
+import { fetchProxyFilters } from '$features/FilterAndSortFonts/api/filters/filters';
+import type { FilterMetadata } from '$features/FilterAndSortFonts/api/filters/filters';
 import { queryClient } from '$shared/api/queryClient';
 import {
     type QueryKey,
diff --git a/src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.test.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts
similarity index 100%
rename from src/features/GetFonts/model/store/availableFilterStore/availableFilterStore.test.ts
rename to src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.test.ts
diff --git a/src/features/GetFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
similarity index 100%
rename from src/features/GetFonts/model/store/bindings.svelte.ts
rename to src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
diff --git a/src/features/GetFonts/model/store/sortStore/sortStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
similarity index 100%
rename from src/features/GetFonts/model/store/sortStore/sortStore.svelte.ts
rename to src/features/FilterAndSortFonts/model/store/sortStore/sortStore.svelte.ts
diff --git a/src/features/GetFonts/model/store/sortStore/sortStore.test.ts b/src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts
similarity index 100%
rename from src/features/GetFonts/model/store/sortStore/sortStore.test.ts
rename to src/features/FilterAndSortFonts/model/store/sortStore/sortStore.test.ts
diff --git a/src/features/GetFonts/model/types/filter.ts b/src/features/FilterAndSortFonts/model/types/filter.ts
similarity index 100%
rename from src/features/GetFonts/model/types/filter.ts
rename to src/features/FilterAndSortFonts/model/types/filter.ts
diff --git a/src/features/GetFonts/ui/Filters/Filters.stories.svelte b/src/features/FilterAndSortFonts/ui/Filters/Filters.stories.svelte
similarity index 100%
rename from src/features/GetFonts/ui/Filters/Filters.stories.svelte
rename to src/features/FilterAndSortFonts/ui/Filters/Filters.stories.svelte
diff --git a/src/features/GetFonts/ui/Filters/Filters.svelte b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte
similarity index 100%
rename from src/features/GetFonts/ui/Filters/Filters.svelte
rename to src/features/FilterAndSortFonts/ui/Filters/Filters.svelte
diff --git a/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
similarity index 98%
rename from src/features/GetFonts/ui/Filters/Filters.svelte.test.ts
rename to src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
index 84a754e..0ef079f 100644
--- a/src/features/GetFonts/ui/Filters/Filters.svelte.test.ts
+++ b/src/features/FilterAndSortFonts/ui/Filters/Filters.svelte.test.ts
@@ -1,7 +1,7 @@
 import {
     appliedFilterStore,
     availableFilterStore,
-} from '$features/GetFonts';
+} from '$features/FilterAndSortFonts';
 import {
     render,
     screen,
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte b/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.stories.svelte
similarity index 100%
rename from src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte
rename to src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.stories.svelte
diff --git a/src/features/GetFonts/ui/FiltersControl/FilterControls.svelte b/src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte
similarity index 100%
rename from src/features/GetFonts/ui/FiltersControl/FilterControls.svelte
rename to src/features/FilterAndSortFonts/ui/FiltersControl/FilterControls.svelte
diff --git a/src/features/GetFonts/ui/index.ts b/src/features/FilterAndSortFonts/ui/index.ts
similarity index 100%
rename from src/features/GetFonts/ui/index.ts
rename to src/features/FilterAndSortFonts/ui/index.ts
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index d2b9162..388412e 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -1,11 +1,11 @@
 <!--
     Component: Search
     Typeface search input for the comparison view.
-    Writes through appliedFilterStore; the global bridge in $features/GetFonts
+    Writes through appliedFilterStore; the global bridge in $features/FilterAndSortFonts
     propagates the value into fontStore.
 -->
 <script lang="ts">
-import { appliedFilterStore } from '$features/GetFonts';
+import { appliedFilterStore } from '$features/FilterAndSortFonts';
 import { SearchBar } from '$shared/ui';
 </script>
 
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts b/src/widgets/ComparisonView/ui/Search/Search.svelte.test.ts
index 4490af1..1bd7575 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/GetFonts';
+import { appliedFilterStore } from '$features/FilterAndSortFonts';
 import {
     render,
     screen,
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index 07d25e5..b5f66b3 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -7,7 +7,7 @@ import {
     FilterControls,
     Filters,
     appliedFilterStore,
-} from '$features/GetFonts';
+} from '$features/FilterAndSortFonts';
 import { springySlideFade } from '$shared/lib';
 import {
     Button,
-- 
2.52.0


From df59dfda02b5799b89a3201bd5b5c2dc2032cf78 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 18:27:10 +0300
Subject: [PATCH 11/29] refactor(features): rename SetupFont to
 AdjustTypography + reorganize

Structural:
- Merge factory + singleton from lib/settingsManager and model/state into
  one model/store/typographySettingsStore/ slice
- Drop now-empty lib/ and model/state/ directories

Semantic:
- Rename feature SetupFont -> AdjustTypography (the feature owns
  continuous typography adjustment, not one-time font setup)
- Drop "Manager" from TypographySettingsManager -> TypographySettingsStore
  (class + factory); singleton typographySettingsStore unchanged

All consumers (Character, Line, SampleList, SliderArea, FontSampler,
comparisonStore) updated. Public barrel signature changed: now exports
createTypographySettingsStore and type TypographySettingsStore.
---
 src/features/AdjustTypography/index.ts        |  6 ++
 src/features/AdjustTypography/model/index.ts  |  5 ++
 .../typographySettingsStore.svelte.ts}        | 15 +++-
 .../typographySettingsStore.test.ts}          | 90 +++++++++----------
 .../TypographyMenu.stories.svelte             |  0
 .../ui/TypographyMenu/TypographyMenu.svelte   |  0
 .../ui/index.ts                               |  0
 .../ui/FontSampler/FontSampler.svelte         |  2 +-
 src/features/SetupFont/index.ts               |  6 --
 src/features/SetupFont/lib/index.ts           |  4 -
 src/features/SetupFont/model/index.ts         |  1 -
 .../model/state/typographySettingsStore.ts    |  7 --
 .../model/stores/comparisonStore.svelte.ts    |  2 +-
 .../model/stores/comparisonStore.test.ts      |  4 +-
 .../ui/Character/Character.svelte             |  2 +-
 .../ComparisonView/ui/Line/Line.svelte        |  2 +-
 .../ui/SliderArea/SliderArea.svelte           |  4 +-
 .../ui/SampleList/SampleList.svelte           |  4 +-
 18 files changed, 78 insertions(+), 76 deletions(-)
 create mode 100644 src/features/AdjustTypography/index.ts
 create mode 100644 src/features/AdjustTypography/model/index.ts
 rename src/features/{SetupFont/lib/settingsManager/settingsManager.svelte.ts => AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts} (95%)
 rename src/features/{SetupFont/lib/settingsManager/settingsManager.test.ts => AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts} (89%)
 rename src/features/{SetupFont => AdjustTypography}/ui/TypographyMenu/TypographyMenu.stories.svelte (100%)
 rename src/features/{SetupFont => AdjustTypography}/ui/TypographyMenu/TypographyMenu.svelte (100%)
 rename src/features/{SetupFont => AdjustTypography}/ui/index.ts (100%)
 delete mode 100644 src/features/SetupFont/index.ts
 delete mode 100644 src/features/SetupFont/lib/index.ts
 delete mode 100644 src/features/SetupFont/model/index.ts
 delete mode 100644 src/features/SetupFont/model/state/typographySettingsStore.ts

diff --git a/src/features/AdjustTypography/index.ts b/src/features/AdjustTypography/index.ts
new file mode 100644
index 0000000..da1afb9
--- /dev/null
+++ b/src/features/AdjustTypography/index.ts
@@ -0,0 +1,6 @@
+export {
+    createTypographySettingsStore,
+    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
new file mode 100644
index 0000000..67419fd
--- /dev/null
+++ b/src/features/AdjustTypography/model/index.ts
@@ -0,0 +1,5 @@
+export {
+    createTypographySettingsStore,
+    type TypographySettingsStore,
+    typographySettingsStore,
+} from './store/typographySettingsStore/typographySettingsStore.svelte';
diff --git a/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
similarity index 95%
rename from src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts
rename to src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 3702b2f..2365196 100644
--- a/src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -16,6 +16,7 @@ import {
     DEFAULT_FONT_WEIGHT,
     DEFAULT_LETTER_SPACING,
     DEFAULT_LINE_HEIGHT,
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
 } from '$entities/Font';
 import {
     type ControlDataModel,
@@ -67,7 +68,7 @@ export interface TypographySettings {
  * Manages multiple typography controls with persistent storage and
  * responsive scaling support for font size.
  */
-export class TypographySettingsManager {
+export class TypographySettingsStore {
     /**
      * Internal map of reactive controls keyed by their identifier
      */
@@ -303,7 +304,7 @@ export class TypographySettingsManager {
  * @param storageId - Persistent storage identifier
  * @returns Typography control manager instance
  */
-export function createTypographySettingsManager(
+export function createTypographySettingsStore(
     configs: ControlModel<ControlId>[],
     storageId: string = 'glyphdiff:typography',
 ) {
@@ -313,5 +314,13 @@ export function createTypographySettingsManager(
         lineHeight: DEFAULT_LINE_HEIGHT,
         letterSpacing: DEFAULT_LETTER_SPACING,
     });
-    return new TypographySettingsManager(configs, storage);
+    return new TypographySettingsStore(configs, storage);
 }
+
+/**
+ * App-wide typography settings singleton, keyed for the comparison view.
+ */
+export const typographySettingsStore = createTypographySettingsStore(
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+    'glyphdiff:comparison:typography',
+);
diff --git a/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
similarity index 89%
rename from src/features/SetupFont/lib/settingsManager/settingsManager.test.ts
rename to src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
index 31d4c8d..094bf75 100644
--- a/src/features/SetupFont/lib/settingsManager/settingsManager.test.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.test.ts
@@ -17,13 +17,13 @@ import {
 } from 'vitest';
 import {
     type TypographySettings,
-    TypographySettingsManager,
-} from './settingsManager.svelte';
+    TypographySettingsStore,
+} from './typographySettingsStore.svelte';
 
 /**
- * Test Strategy for TypographySettingsManager
+ * Test Strategy for TypographySettingsStore
  *
- * This test suite validates the TypographySettingsManager state management logic.
+ * This test suite validates the TypographySettingsStore state management logic.
  * These are unit tests for the manager logic, separate from component rendering.
  *
  * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects
@@ -46,7 +46,7 @@ async function flushEffects() {
     await Promise.resolve();
 }
 
-describe('TypographySettingsManager - Unit Tests', () => {
+describe('TypographySettingsStore - Unit Tests', () => {
     let mockStorage: TypographySettings;
     let mockPersistentStore: {
         value: TypographySettings;
@@ -86,7 +86,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Initialization', () => {
         it('creates manager with default values from storage', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -106,7 +106,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -118,7 +118,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('initializes font size control with base size multiplied by current multiplier (1)', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -127,7 +127,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('returns all controls via controls getter', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -143,7 +143,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('returns individual controls via specific getters', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -161,7 +161,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('control instances have expected interface', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -180,7 +180,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Multiplier System', () => {
         it('has default multiplier of 1', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -189,7 +189,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates multiplier when set', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -202,7 +202,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('does not update multiplier if set to same value', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -218,7 +218,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
             mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -242,7 +242,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates font size control display value when multiplier increases', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -263,7 +263,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Base Size Setter', () => {
         it('updates baseSize when set directly', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -274,7 +274,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates size control value when baseSize is set', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -285,7 +285,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('applies multiplier to size control when baseSize is set', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -299,7 +299,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Rendered Size Calculation', () => {
         it('calculates renderedSize as baseSize * multiplier', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -308,7 +308,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates renderedSize when multiplier changes', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -321,7 +321,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates renderedSize when baseSize changes', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -341,7 +341,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         // proxy effect behavior should be tested in E2E tests.
 
         it('does NOT immediately update baseSize from control change (effect is async)', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -356,7 +356,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('updates baseSize via direct setter (synchronous)', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -381,7 +381,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -394,7 +394,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('syncs to storage after effect flush (async)', async () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -410,7 +410,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('syncs control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -423,7 +423,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('syncs height control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -435,7 +435,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('syncs spacing control changes to storage after effect flush (async)', async () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -449,7 +449,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Control Value Getters', () => {
         it('returns current weight value', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -461,7 +461,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('returns current height value', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -473,7 +473,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('returns current spacing value', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -486,7 +486,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
         it('returns default value when control is not found', () => {
             // Create a manager with empty configs (no controls)
-            const manager = new TypographySettingsManager([], mockPersistentStore);
+            const manager = new TypographySettingsStore([], mockPersistentStore);
 
             expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
             expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
@@ -504,7 +504,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
             };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -537,7 +537,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
                 clear: clearSpy,
             };
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -548,7 +548,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('respects multiplier when resetting font size control', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -566,7 +566,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
 
     describe('Complex Scenarios', () => {
         it('handles changing multiplier then modifying baseSize', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -587,7 +587,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('maintains correct renderedSize throughout changes', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -609,7 +609,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles multiple control changes in sequence', async () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -634,7 +634,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
             mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
             mockPersistentStore = createMockPersistentStore(mockStorage);
 
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -646,7 +646,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles very small multiplier', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -659,7 +659,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles large base size with multiplier', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -672,7 +672,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles floating point precision in multiplier', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -691,7 +691,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles control methods (increase/decrease)', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
@@ -705,7 +705,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
         });
 
         it('handles control boundary conditions', () => {
-            const manager = new TypographySettingsManager(
+            const manager = new TypographySettingsStore(
                 DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
                 mockPersistentStore,
             );
diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.stories.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.stories.svelte
similarity index 100%
rename from src/features/SetupFont/ui/TypographyMenu/TypographyMenu.stories.svelte
rename to src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.stories.svelte
diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
similarity index 100%
rename from src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
rename to src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
diff --git a/src/features/SetupFont/ui/index.ts b/src/features/AdjustTypography/ui/index.ts
similarity index 100%
rename from src/features/SetupFont/ui/index.ts
rename to src/features/AdjustTypography/ui/index.ts
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 79b4e9c..7b362a4 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -8,7 +8,7 @@ import {
     FontApplicator,
     type UnifiedFont,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/SetupFont/model';
+import { typographySettingsStore } from '$features/AdjustTypography/model';
 import {
     Badge,
     ContentEditable,
diff --git a/src/features/SetupFont/index.ts b/src/features/SetupFont/index.ts
deleted file mode 100644
index c48f481..0000000
--- a/src/features/SetupFont/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export {
-    createTypographySettingsManager,
-    type TypographySettingsManager,
-} from './lib';
-export { typographySettingsStore } from './model';
-export { TypographyMenu } from './ui';
diff --git a/src/features/SetupFont/lib/index.ts b/src/features/SetupFont/lib/index.ts
deleted file mode 100644
index a05ed6e..0000000
--- a/src/features/SetupFont/lib/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export {
-    createTypographySettingsManager,
-    type TypographySettingsManager,
-} from './settingsManager/settingsManager.svelte';
diff --git a/src/features/SetupFont/model/index.ts b/src/features/SetupFont/model/index.ts
deleted file mode 100644
index 204e237..0000000
--- a/src/features/SetupFont/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { typographySettingsStore } from './state/typographySettingsStore';
diff --git a/src/features/SetupFont/model/state/typographySettingsStore.ts b/src/features/SetupFont/model/state/typographySettingsStore.ts
deleted file mode 100644
index 592b355..0000000
--- a/src/features/SetupFont/model/state/typographySettingsStore.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '$entities/Font';
-import { createTypographySettingsManager } from '../../lib';
-
-export const typographySettingsStore = createTypographySettingsManager(
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    'glyphdiff:comparison:typography',
-);
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 812976a..cf19174 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -21,7 +21,7 @@ import {
     fontStore,
     getFontUrl,
 } from '$entities/Font';
-import { typographySettingsStore } from '$features/SetupFont/model';
+import { typographySettingsStore } from '$features/AdjustTypography/model';
 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 72a3cec..d42686d 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -71,7 +71,7 @@ vi.mock('$entities/Font', async importOriginal => {
     };
 });
 
-vi.mock('$features/SetupFont', () => ({
+vi.mock('$features/AdjustTypography', () => ({
     DEFAULT_TYPOGRAPHY_CONTROLS_DATA: [],
     createTypographyControlManager: vi.fn(() => ({
         weight: 400,
@@ -80,7 +80,7 @@ vi.mock('$features/SetupFont', () => ({
     })),
 }));
 
-vi.mock('$features/SetupFont/model', () => ({
+vi.mock('$features/AdjustTypography/model', () => ({
     typographySettingsStore: {
         weight: 400,
         renderedSize: 48,
diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index c247f15..7261b16 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -3,7 +3,7 @@
     Renders a single character with morphing animation
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/SetupFont';
+import { typographySettingsStore } from '$features/AdjustTypography';
 import { cn } from '$shared/lib';
 import { comparisonStore } from '../../model';
 
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index a145635..d8cb81f 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -3,7 +3,7 @@
     Renders a line of text in the SliderArea
 -->
 <script lang="ts">
-import { typographySettingsStore } from '$features/SetupFont';
+import { typographySettingsStore } from '$features/AdjustTypography';
 import type { Snippet } from 'svelte';
 
 interface LineChar {
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 2fb6ed6..2d3ca95 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -8,8 +8,8 @@
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
 -->
 <script lang="ts">
-import { TypographyMenu } from '$features/SetupFont';
-import { typographySettingsStore } from '$features/SetupFont/model';
+import { TypographyMenu } from '$features/AdjustTypography';
+import { typographySettingsStore } from '$features/AdjustTypography/model';
 import {
     type ResponsiveManager,
     debounce,
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 2dbda8f..8da5e15 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -11,11 +11,11 @@ import {
     createFontRowSizeResolver,
     fontStore,
 } from '$entities/Font';
-import { FontSampler } from '$features/DisplayFont';
 import {
     TypographyMenu,
     typographySettingsStore,
-} from '$features/SetupFont';
+} from '$features/AdjustTypography';
+import { FontSampler } from '$features/DisplayFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
 import { layoutManager } from '../../model';
-- 
2.52.0


From 07d044f4d6acd9550fc2c887464da0d5719bc8c5 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 19:41:40 +0300
Subject: [PATCH 12/29] refactor: extract BatchFontStore into new
 FetchFontsByIds feature

The byId font fetch was a verb-oriented capability with a single
consumer driven by a feature need (materializing comparison picks).
That shape belongs at the feature layer, not on the entity.

Move:
- entities/Font/model/store/batchFontStore -> features/FetchFontsByIds/model/store/fontsByIdsStore
- Class BatchFontStore -> FontsByIdsStore

entities/Font retains the transport primitives (fetchFontsByIds,
seedFontCache) and the keyspace (fontKeys); the feature wraps them in
the reactive store. comparisonStore now imports FontsByIdsStore from
the new feature. The proxy API is imported via direct path so vi.spyOn
on the source module still observes the call.
---
 src/entities/Font/api/index.ts                |  1 +
 src/entities/Font/model/store/index.ts        |  3 --
 src/features/FetchFontsByIds/index.ts         |  1 +
 src/features/FetchFontsByIds/model/index.ts   |  1 +
 .../fontsByIdsStore.svelte.ts}                | 17 +++++------
 .../fontsByIdsStore/fontsByIdsStore.test.ts}  | 30 +++++++++----------
 .../model/stores/comparisonStore.svelte.ts    | 18 +++++------
 .../model/stores/comparisonStore.test.ts      |  8 ++---
 8 files changed, 37 insertions(+), 42 deletions(-)
 create mode 100644 src/features/FetchFontsByIds/index.ts
 create mode 100644 src/features/FetchFontsByIds/model/index.ts
 rename src/{entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts => features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts} (84%)
 rename src/{entities/Font/model/store/batchFontStore/batchFontStore.test.ts => features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts} (85%)

diff --git a/src/entities/Font/api/index.ts b/src/entities/Font/api/index.ts
index 0a1dde1..aad2be4 100644
--- a/src/entities/Font/api/index.ts
+++ b/src/entities/Font/api/index.ts
@@ -9,6 +9,7 @@ export {
     fetchFontsByIds,
     fetchProxyFontById,
     fetchProxyFonts,
+    seedFontCache,
 } from './proxy/proxyFonts';
 export type {
     ProxyFontsParams,
diff --git a/src/entities/Font/model/store/index.ts b/src/entities/Font/model/store/index.ts
index 48dd140..bc6e56a 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -1,9 +1,6 @@
 // Applied fonts manager
 export * from './appliedFontsStore/appliedFontsStore.svelte';
 
-// Batch font store
-export { BatchFontStore } from './batchFontStore/batchFontStore.svelte';
-
 // Single FontStore
 export {
     createFontStore,
diff --git a/src/features/FetchFontsByIds/index.ts b/src/features/FetchFontsByIds/index.ts
new file mode 100644
index 0000000..600c651
--- /dev/null
+++ b/src/features/FetchFontsByIds/index.ts
@@ -0,0 +1 @@
+export { FontsByIdsStore } from './model';
diff --git a/src/features/FetchFontsByIds/model/index.ts b/src/features/FetchFontsByIds/model/index.ts
new file mode 100644
index 0000000..c449f87
--- /dev/null
+++ b/src/features/FetchFontsByIds/model/index.ts
@@ -0,0 +1 @@
+export { FontsByIdsStore } from './store/fontsByIdsStore/fontsByIdsStore.svelte';
diff --git a/src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
similarity index 84%
rename from src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts
rename to src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
index 7b0e9fe..9b177a8 100644
--- a/src/entities/Font/model/store/batchFontStore/batchFontStore.svelte.ts
+++ b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.svelte.ts
@@ -1,14 +1,14 @@
-import { fontKeys } from '$shared/api/queryKeys';
-import { BaseQueryStore } from '$shared/lib/helpers/BaseQueryStore.svelte';
 import {
     fetchFontsByIds,
     seedFontCache,
-} from '../../../api/proxy/proxyFonts';
+} from '$entities/Font/api/proxy/proxyFonts';
 import {
     FontNetworkError,
     FontResponseError,
-} from '../../../lib/errors/errors';
-import type { UnifiedFont } from '../../types';
+} 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';
 
 /**
  * Internal fetcher that seeds the cache and handles error wrapping.
@@ -35,11 +35,10 @@ async function fetchAndSeed(ids: string[]): Promise<UnifiedFont[]> {
 }
 
 /**
- * Reactive store for fetching and caching batches of fonts by ID.
- * Integrates with TanStack Query via BaseQueryStore and handles
- * normalized cache seeding.
+ * Reactive store for fetching specific fonts by ID via the proxy batch endpoint.
+ * Wraps TanStack Query and seeds the detail cache for sibling consumers.
  */
-export class BatchFontStore extends BaseQueryStore<UnifiedFont[]> {
+export class FontsByIdsStore extends BaseQueryStore<UnifiedFont[]> {
     constructor(initialIds: string[] = []) {
         super({
             queryKey: fontKeys.batch(initialIds),
diff --git a/src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
similarity index 85%
rename from src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts
rename to src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
index 3b112ac..7849535 100644
--- a/src/entities/Font/model/store/batchFontStore/batchFontStore.test.ts
+++ b/src/features/FetchFontsByIds/model/store/fontsByIdsStore/fontsByIdsStore.test.ts
@@ -1,3 +1,8 @@
+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 {
@@ -7,14 +12,9 @@ import {
     it,
     vi,
 } from 'vitest';
-import * as api from '../../../api/proxy/proxyFonts';
-import {
-    FontNetworkError,
-    FontResponseError,
-} from '../../../lib/errors/errors';
-import { BatchFontStore } from './batchFontStore.svelte';
+import { FontsByIdsStore } from './fontsByIdsStore.svelte';
 
-describe('BatchFontStore', () => {
+describe('FontsByIdsStore', () => {
     beforeEach(() => {
         queryClient.clear();
         vi.clearAllMocks();
@@ -23,7 +23,7 @@ describe('BatchFontStore', () => {
     describe('Fetch Behavior', () => {
         it('should skip fetch when initialized with empty IDs', async () => {
             const spy = vi.spyOn(api, 'fetchFontsByIds');
-            const store = new BatchFontStore([]);
+            const store = new FontsByIdsStore([]);
             expect(spy).not.toHaveBeenCalled();
             expect(store.fonts).toEqual([]);
         });
@@ -31,7 +31,7 @@ describe('BatchFontStore', () => {
         it('should fetch and seed cache for valid IDs', async () => {
             const fonts = [{ id: 'a', name: 'A' }] as any[];
             vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(fonts);
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.fonts).toEqual(fonts), { timeout: 1000 });
             expect(queryClient.getQueryData(fontKeys.detail('a'))).toEqual(fonts[0]);
         });
@@ -42,7 +42,7 @@ describe('BatchFontStore', () => {
             vi.spyOn(api, 'fetchFontsByIds').mockImplementation(() =>
                 new Promise(r => setTimeout(() => r([{ id: 'a' }] as any), 50))
             );
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             expect(store.isLoading).toBe(true);
             await vi.waitFor(() => expect(store.isLoading).toBe(false), { timeout: 1000 });
         });
@@ -51,7 +51,7 @@ describe('BatchFontStore', () => {
     describe('Error Handling', () => {
         it('should wrap network failures in FontNetworkError', async () => {
             vi.spyOn(api, 'fetchFontsByIds').mockRejectedValue(new Error('Network fail'));
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
             expect(store.error).toBeInstanceOf(FontNetworkError);
         });
@@ -59,7 +59,7 @@ describe('BatchFontStore', () => {
         it('should handle malformed API responses with FontResponseError', async () => {
             // Mocking a malformed response that the store should validate
             vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(null as any);
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.isError).toBe(true), { timeout: 1000 });
             expect(store.error).toBeInstanceOf(FontResponseError);
         });
@@ -67,7 +67,7 @@ describe('BatchFontStore', () => {
         it('should have null error in success state', async () => {
             const fonts = [{ id: 'a' }] as any[];
             vi.spyOn(api, 'fetchFontsByIds').mockResolvedValue(fonts);
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.fonts).toEqual(fonts), { timeout: 1000 });
             expect(store.error).toBeNull();
         });
@@ -78,7 +78,7 @@ describe('BatchFontStore', () => {
             const fonts1 = [{ id: 'a' }] as any[];
             const spy = vi.spyOn(api, 'fetchFontsByIds').mockResolvedValueOnce(fonts1);
 
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.fonts).toEqual(fonts1), { timeout: 1000 });
 
             spy.mockClear();
@@ -97,7 +97,7 @@ describe('BatchFontStore', () => {
                 .mockResolvedValueOnce(fonts1)
                 .mockResolvedValueOnce(fonts2);
 
-            const store = new BatchFontStore(['a']);
+            const store = new FontsByIdsStore(['a']);
             await vi.waitFor(() => expect(store.fonts).toEqual(fonts1), { timeout: 1000 });
 
             store.setIds(['b']);
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index cf19174..1c6bc3c 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -7,14 +7,13 @@
  *
  * Features:
  * - Persistent font selection (survives page refresh)
- * - Font loading state tracking via BatchFontStore + TanStack Query
+ * - Font loading state tracking via FontsByIdsStore + TanStack Query
  * - Sample text management
  * - Typography controls (size, weight, line height, spacing)
  * - Slider position for character-by-character morphing
  */
 
 import {
-    BatchFontStore,
     type FontLoadRequestConfig,
     type UnifiedFont,
     appliedFontsManager,
@@ -22,6 +21,7 @@ import {
     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';
@@ -51,7 +51,7 @@ const storage = createPersistentStore<ComparisonState>('glyphdiff:comparison', {
 /**
  * Store for managing font comparison state.
  *
- * Uses BatchFontStore (TanStack Query) to fetch fonts by ID, replacing
+ * Uses FontsByIdsStore (TanStack Query) to fetch fonts by ID, replacing
  * the previous hand-rolled async fetch approach. Three reactive effects
  * handle: (1) syncing batch results into fontA/fontB, (2) triggering the
  * CSS Font Loading API, and (3) falling back to default fonts when
@@ -85,17 +85,17 @@ export class ComparisonStore {
     /**
      * TanStack Query-backed store for efficient batch font retrieval
      */
-    #batchStore: BatchFontStore;
+    #fontsByIdsStore: FontsByIdsStore;
 
     constructor() {
         // Synchronously seed the batch store with any IDs already in storage
         const { fontAId, fontBId } = storage.value;
-        this.#batchStore = new BatchFontStore(fontAId && fontBId ? [fontAId, fontBId] : []);
+        this.#fontsByIdsStore = new FontsByIdsStore(fontAId && fontBId ? [fontAId, fontBId] : []);
 
         $effect.root(() => {
             // Effect 1: Sync batch results → fontA / fontB
             $effect(() => {
-                const fonts = this.#batchStore.fonts;
+                const fonts = this.#fontsByIdsStore.fonts;
                 if (fonts.length === 0) {
                     return;
                 }
@@ -157,7 +157,7 @@ export class ComparisonStore {
                         const id1 = fonts[0].id;
                         const id2 = fonts[fonts.length - 1].id;
                         storage.value = { fontAId: id1, fontBId: id2 };
-                        this.#batchStore.setIds([id1, id2]);
+                        this.#fontsByIdsStore.setIds([id1, id2]);
                     });
                 }
             });
@@ -316,7 +316,7 @@ export class ComparisonStore {
      * True if any font is currently being fetched or loaded (reactive)
      */
     get isLoading() {
-        return this.#batchStore.isLoading || !this.#fontsReady;
+        return this.#fontsByIdsStore.isLoading || !this.#fontsReady;
     }
 
     /**
@@ -325,7 +325,7 @@ export class ComparisonStore {
     resetAll() {
         this.#fontA = undefined;
         this.#fontB = undefined;
-        this.#batchStore.setIds([]);
+        this.#fontsByIdsStore.setIds([]);
         storage.clear();
         typographySettingsStore.reset();
     }
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
index d42686d..5a3146e 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -1,7 +1,7 @@
 /**
  * Unit tests for ComparisonStore (TanStack Query refactor)
  *
- * Uses the real BatchFontStore so Svelte $state reactivity works correctly.
+ * Uses the real FontsByIdsStore so Svelte $state reactivity works correctly.
  * Controls network behaviour via vi.spyOn on the proxyFonts API layer.
  */
 
@@ -53,12 +53,8 @@ vi.mock('$shared/lib/helpers/createPersistentStore/createPersistentStore.svelte'
 
 vi.mock('$entities/Font', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font')>();
-    const { BatchFontStore } = await import(
-        '$entities/Font/model/store/batchFontStore/batchFontStore.svelte'
-    );
     return {
         ...actual,
-        BatchFontStore,
         fontStore: { fonts: [] },
         appliedFontsManager: {
             touch: vi.fn(),
@@ -129,7 +125,7 @@ describe('ComparisonStore', () => {
         });
     });
 
-    describe('Restoration from Storage (via BatchFontStore)', () => {
+    describe('Restoration from Storage (via FontsByIdsStore)', () => {
         it('should restore fontA and fontB from stored IDs', async () => {
             mockStorage._value.fontAId = mockFontA.id;
             mockStorage._value.fontBId = mockFontB.id;
-- 
2.52.0


From 728380498ba67935dca5b2fa050aca5309d230e3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 20:00:43 +0300
Subject: [PATCH 13/29] refactor(Font): rename fontStore and
 appliedFontsManager

Both names were vague or overloaded:

- fontStore / FontStore -> fontCatalogStore / FontCatalogStore
  Three font-related stores live in this slice; the new name names the
  paginated catalog specifically.

- appliedFontsManager / AppliedFontsManager -> fontLifecycleManager /
  FontLifecycleManager
  "Applied" collided with the filter-side appliedFilterStore (different
  meaning). The class actually orchestrates a load-use-evict lifecycle
  with FontBufferCache + FontEvictionPolicy + FontLoadQueue
  collaborators, so "Manager" is justified. Companion types file moved
  alongside (appliedFonts.ts -> fontLifecycle.ts).

Directories, file basenames, factory (createFontStore ->
createFontCatalogStore), and the AppliedFontsManagerDeps interface all
renamed. All consumers (ComparisonView, SampleList, FontList,
FontApplicator, FontVirtualList, FilterAndSortFonts bindings,
createFontRowSizeResolver, mocks) updated.
---
 src/entities/Font/lib/mocks/stores.mock.ts    |  6 ++--
 .../sizeResolver/createFontRowSizeResolver.ts |  6 ++--
 .../fontCatalogStore.svelte.spec.ts}          | 18 +++++-----
 .../fontCatalogStore.svelte.ts}               |  8 ++---
 .../errors.ts                                 |  0
 .../fontLifecycleManager.svelte.ts}           |  8 ++---
 .../fontLifecycleManager.test.ts}             | 16 ++++-----
 .../fontBufferCache/FontBufferCache.test.ts   |  0
 .../utils/fontBufferCache/FontBufferCache.ts  |  0
 .../FontEvictionPolicy.test.ts                |  0
 .../fontEvictionPolicy/FontEvictionPolicy.ts  |  0
 .../utils/fontLoadQueue/FontLoadQueue.test.ts |  0
 .../utils/fontLoadQueue/FontLoadQueue.ts      |  0
 .../generateFontKey/generateFontKey.test.ts   |  0
 .../utils/generateFontKey/generateFontKey.ts  |  0
 .../getEffectiveConcurrency.test.ts           |  0
 .../getEffectiveConcurrency.ts                |  0
 .../utils/index.ts                            |  0
 .../utils/loadFont/loadFont.test.ts           |  0
 .../utils/loadFont/loadFont.ts                |  0
 .../yieldToMainThread.test.ts                 |  0
 .../yieldToMainThread/yieldToMainThread.ts    |  0
 src/entities/Font/model/store/index.ts        | 14 ++++----
 src/entities/Font/model/types/index.ts        |  2 +-
 .../{appliedFonts.ts => fontLifecycle.ts}     |  0
 .../FontApplicator.stories.svelte             |  6 ++--
 .../ui/FontApplicator/FontApplicator.svelte   |  4 +--
 .../FontVirtualList.stories.svelte            |  8 ++---
 .../ui/FontVirtualList/FontVirtualList.svelte | 34 +++++++++----------
 .../FilterAndSortFonts/model/index.ts         |  2 +-
 .../model/store/bindings.svelte.ts            | 14 ++++----
 .../createVirtualizer.svelte.ts               |  2 +-
 .../model/stores/comparisonStore.svelte.ts    | 16 ++++-----
 .../model/stores/comparisonStore.test.ts      | 20 +++++------
 .../ui/FontList/FontList.svelte               | 10 +++---
 .../ComparisonView/ui/Search/Search.svelte    |  2 +-
 .../ui/SampleList/SampleList.svelte           | 10 +++---
 .../SampleListSection.svelte                  |  4 +--
 38 files changed, 105 insertions(+), 105 deletions(-)
 rename src/entities/Font/model/store/{fontStore/fontStore.svelte.spec.ts => fontCatalogStore/fontCatalogStore.svelte.spec.ts} (98%)
 rename src/entities/Font/model/store/{fontStore/fontStore.svelte.ts => fontCatalogStore/fontCatalogStore.svelte.ts} (98%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/errors.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore/appliedFontsStore.svelte.ts => fontLifecycleManager/fontLifecycleManager.svelte.ts} (98%)
 rename src/entities/Font/model/store/{appliedFontsStore/appliedFontStore.test.ts => fontLifecycleManager/fontLifecycleManager.test.ts} (94%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontBufferCache/FontBufferCache.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontBufferCache/FontBufferCache.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontEvictionPolicy/FontEvictionPolicy.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontEvictionPolicy/FontEvictionPolicy.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontLoadQueue/FontLoadQueue.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/fontLoadQueue/FontLoadQueue.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/generateFontKey/generateFontKey.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/generateFontKey/generateFontKey.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/getEffectiveConcurrency/getEffectiveConcurrency.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/getEffectiveConcurrency/getEffectiveConcurrency.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/index.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/loadFont/loadFont.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/loadFont/loadFont.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/yieldToMainThread/yieldToMainThread.test.ts (100%)
 rename src/entities/Font/model/store/{appliedFontsStore => fontLifecycleManager}/utils/yieldToMainThread/yieldToMainThread.ts (100%)
 rename src/entities/Font/model/types/store/{appliedFonts.ts => fontLifecycle.ts} (100%)

diff --git a/src/entities/Font/lib/mocks/stores.mock.ts b/src/entities/Font/lib/mocks/stores.mock.ts
index fd54060..030b581 100644
--- a/src/entities/Font/lib/mocks/stores.mock.ts
+++ b/src/entities/Font/lib/mocks/stores.mock.ts
@@ -667,10 +667,10 @@ export const MOCK_STORES = {
         };
     },
     /**
-     * Create a mock FontStore object
-     * Matches FontStore's public API for Storybook use
+     * Create a mock FontCatalogStore object
+     * Matches FontCatalogStore's public API for Storybook use
      */
-    fontStore: (config: {
+    fontCatalogStore: (config: {
         /**
          * Preset font list
          */
diff --git a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
index 29afcf5..93e76fa 100644
--- a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
+++ b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
@@ -1,5 +1,5 @@
 import { TextLayoutEngine } from '$shared/lib';
-import { generateFontKey } from '../../model/store/appliedFontsStore/utils/generateFontKey/generateFontKey';
+import { generateFontKey } from '../../model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey';
 import type {
     FontLoadStatus,
     UnifiedFont,
@@ -41,7 +41,7 @@ export interface FontRowSizeResolverOptions {
     /**
      * Returns the font load status for a given font key (`'{id}@{weight}'` or `'{id}@vf'`).
      *
-     * In production: `(key) => appliedFontsManager.statuses.get(key)`.
+     * In production: `(key) => fontLifecycleManager.statuses.get(key)`.
      * Injected for testability — avoids a module-level singleton dependency in tests.
      * The call to `.get()` on a `SvelteMap` must happen inside a `$derived.by` context
      * for reactivity to work. This is satisfied when `itemHeight` is called by
@@ -108,7 +108,7 @@ export function createFontRowSizeResolver(options: FontRowSizeResolverOptions):
         // generateFontKey: '{id}@{weight}' for static fonts, '{id}@vf' for variable fonts.
         const fontKey = generateFontKey({ id: font.id, weight, isVariable: font.features?.isVariable });
 
-        // Reading via getStatus() allows the caller to pass appliedFontsManager.statuses.get(),
+        // Reading via getStatus() allows the caller to pass fontLifecycleManager.statuses.get(),
         // which creates a Svelte 5 reactive dependency when called inside $derived.by.
         const status = options.getStatus(fontKey);
         if (status !== 'loaded') {
diff --git a/src/entities/Font/model/store/fontStore/fontStore.svelte.spec.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
similarity index 98%
rename from src/entities/Font/model/store/fontStore/fontStore.svelte.spec.ts
rename to src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
index d2e058c..5cdae3a 100644
--- a/src/entities/Font/model/store/fontStore/fontStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -17,7 +17,7 @@ import {
     generateMockFonts,
 } from '../../../lib/mocks/fonts.mock';
 import type { UnifiedFont } from '../../types';
-import { FontStore } from './fontStore.svelte';
+import { FontCatalogStore } from './fontCatalogStore.svelte';
 
 vi.mock('$shared/api/queryClient', () => ({
     queryClient: new QueryClient({
@@ -44,7 +44,7 @@ const makeResponse = (
 });
 
 function makeStore(params = {}) {
-    return new FontStore({ limit: 10, ...params });
+    return new FontCatalogStore({ limit: 10, ...params });
 }
 
 async function fetchedStore(params = {}, fonts = generateMockFonts(5), meta: Parameters<typeof makeResponse>[1] = {}) {
@@ -55,7 +55,7 @@ async function fetchedStore(params = {}, fonts = generateMockFonts(5), meta: Par
     return store;
 }
 
-describe('FontStore', () => {
+describe('FontCatalogStore', () => {
     afterEach(() => {
         queryClient.clear();
         vi.resetAllMocks();
@@ -69,7 +69,7 @@ describe('FontStore', () => {
         });
 
         it('defaults limit to 50 when not provided', () => {
-            const store = new FontStore();
+            const store = new FontCatalogStore();
             expect(store.params.limit).toBe(50);
             store.destroy();
         });
@@ -390,11 +390,11 @@ describe('FontStore', () => {
     });
 
     describe('nextPage', () => {
-        let store: FontStore;
+        let store: FontCatalogStore;
 
         beforeEach(async () => {
             fetch.mockResolvedValue(makeResponse(generateMockFonts(10), { total: 30, limit: 10, offset: 0 }));
-            store = new FontStore({ limit: 10 });
+            store = new FontCatalogStore({ limit: 10 });
             await store.refetch();
             flushSync();
         });
@@ -415,7 +415,7 @@ describe('FontStore', () => {
             // Set up a store where all fonts fit in one page (hasMore = false)
             queryClient.clear();
             fetch.mockResolvedValue(makeResponse(generateMockFonts(10), { total: 10, limit: 10, offset: 0 }));
-            store = new FontStore({ limit: 10 });
+            store = new FontCatalogStore({ limit: 10 });
             await store.refetch();
             flushSync();
 
@@ -454,7 +454,7 @@ describe('FontStore', () => {
     describe('getCachedData / setQueryData', () => {
         it('getCachedData returns undefined before any fetch', () => {
             queryClient.clear();
-            const store = new FontStore({ limit: 10 });
+            const store = new FontCatalogStore({ limit: 10 });
             expect(store.getCachedData()).toBeUndefined();
             store.destroy();
         });
@@ -502,7 +502,7 @@ describe('FontStore', () => {
     });
 
     describe('filter shortcut methods', () => {
-        let store: FontStore;
+        let store: FontCatalogStore;
 
         beforeEach(() => {
             store = makeStore();
diff --git a/src/entities/Font/model/store/fontStore/fontStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
similarity index 98%
rename from src/entities/Font/model/store/fontStore/fontStore.svelte.ts
rename to src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
index aeeb9cc..165a5ab 100644
--- a/src/entities/Font/model/store/fontStore/fontStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -25,7 +25,7 @@ type FontStoreParams = Omit<ProxyFontsParams, 'offset'>;
 
 type FontStoreResult = InfiniteQueryObserverResult<InfiniteData<ProxyFontsResponse, PageParam>, Error>;
 
-export class FontStore {
+export class FontCatalogStore {
     #params = $state<FontStoreParams>({ limit: 50 });
     #result = $state<FontStoreResult>({} as FontStoreResult);
     #observer: InfiniteQueryObserver<
@@ -459,8 +459,8 @@ export class FontStore {
     }
 }
 
-export function createFontStore(params: FontStoreParams = {}): FontStore {
-    return new FontStore(params);
+export function createFontCatalogStore(params: FontStoreParams = {}): FontCatalogStore {
+    return new FontCatalogStore(params);
 }
 
-export const fontStore = new FontStore({ limit: 50 });
+export const fontCatalogStore = new FontCatalogStore({ limit: 50 });
diff --git a/src/entities/Font/model/store/appliedFontsStore/errors.ts b/src/entities/Font/model/store/fontLifecycleManager/errors.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/errors.ts
rename to src/entities/Font/model/store/fontLifecycleManager/errors.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
similarity index 98%
rename from src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts
rename to src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
index 48bf55c..1a4755e 100644
--- a/src/entities/Font/model/store/appliedFontsStore/appliedFontsStore.svelte.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
@@ -17,7 +17,7 @@ import { FontBufferCache } from './utils/fontBufferCache/FontBufferCache';
 import { FontEvictionPolicy } from './utils/fontEvictionPolicy/FontEvictionPolicy';
 import { FontLoadQueue } from './utils/fontLoadQueue/FontLoadQueue';
 
-interface AppliedFontsManagerDeps {
+interface FontLifecycleManagerDeps {
     cache?: FontBufferCache;
     eviction?: FontEvictionPolicy;
     queue?: FontLoadQueue;
@@ -46,7 +46,7 @@ interface AppliedFontsManagerDeps {
  *
  * **Browser APIs Used:** `scheduler.yield()`, `isInputPending()`, `requestIdleCallback`, Cache API, Network Information API
  */
-export class AppliedFontsManager {
+export class FontLifecycleManager {
     // Injected collaborators - each handles one concern for better testability
     readonly #cache: FontBufferCache;
     readonly #eviction: FontEvictionPolicy;
@@ -78,7 +78,7 @@ export class AppliedFontsManager {
     // Starts periodic cleanup timer (browser-only).
     constructor(
         { cache = new FontBufferCache(), eviction = new FontEvictionPolicy(), queue = new FontLoadQueue() }:
-            AppliedFontsManagerDeps = {},
+            FontLifecycleManagerDeps = {},
     ) {
         // Inject collaborators - defaults provided for production, fakes for testing
         this.#cache = cache;
@@ -396,4 +396,4 @@ export class AppliedFontsManager {
 /**
  * Singleton instance — use throughout the application for unified font loading state.
  */
-export const appliedFontsManager = new AppliedFontsManager();
+export const fontLifecycleManager = new FontLifecycleManager();
diff --git a/src/entities/Font/model/store/appliedFontsStore/appliedFontStore.test.ts b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.test.ts
similarity index 94%
rename from src/entities/Font/model/store/appliedFontsStore/appliedFontStore.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.test.ts
index b1183ba..4c7e4ed 100644
--- a/src/entities/Font/model/store/appliedFontsStore/appliedFontStore.test.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.test.ts
@@ -1,8 +1,8 @@
 /**
  * @vitest-environment jsdom
  */
-import { AppliedFontsManager } from './appliedFontsStore.svelte';
 import { FontFetchError } from './errors';
+import { FontLifecycleManager } from './fontLifecycleManager.svelte';
 import { FontEvictionPolicy } from './utils/fontEvictionPolicy/FontEvictionPolicy';
 
 class FakeBufferCache {
@@ -32,8 +32,8 @@ const makeConfig = (id: string, overrides: Partial<{ weight: number; isVariable:
     ...overrides,
 });
 
-describe('AppliedFontsManager', () => {
-    let manager: AppliedFontsManager;
+describe('FontLifecycleManager', () => {
+    let manager: FontLifecycleManager;
     let eviction: FontEvictionPolicy;
     let mockFontFaceSet: { add: ReturnType<typeof vi.fn>; delete: ReturnType<typeof vi.fn> };
 
@@ -55,7 +55,7 @@ describe('AppliedFontsManager', () => {
         });
         vi.stubGlobal('FontFace', MockFontFace);
 
-        manager = new AppliedFontsManager({ cache: new FakeBufferCache() as any, eviction });
+        manager = new FontLifecycleManager({ cache: new FakeBufferCache() as any, eviction });
     });
 
     afterEach(() => {
@@ -101,7 +101,7 @@ describe('AppliedFontsManager', () => {
 
         it('skips fonts that have exhausted retries', async () => {
             const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-            const failManager = new AppliedFontsManager({ cache: new FailingBufferCache() as any, eviction });
+            const failManager = new FontLifecycleManager({ cache: new FailingBufferCache() as any, eviction });
 
             // exhaust all 3 retries
             for (let i = 0; i < 3; i++) {
@@ -160,7 +160,7 @@ describe('AppliedFontsManager', () => {
     describe('Phase 1 — fetch', () => {
         it('sets status to error on fetch failure', async () => {
             const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-            const failManager = new AppliedFontsManager({ cache: new FailingBufferCache() as any, eviction });
+            const failManager = new FontLifecycleManager({ cache: new FailingBufferCache() as any, eviction });
 
             failManager.touch([makeConfig('broken')]);
             await vi.advanceTimersByTimeAsync(50);
@@ -171,7 +171,7 @@ describe('AppliedFontsManager', () => {
 
         it('logs a console error on fetch failure', async () => {
             const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-            const failManager = new AppliedFontsManager({ cache: new FailingBufferCache() as any, eviction });
+            const failManager = new FontLifecycleManager({ cache: new FailingBufferCache() as any, eviction });
 
             failManager.touch([makeConfig('broken')]);
             await vi.advanceTimersByTimeAsync(50);
@@ -189,7 +189,7 @@ describe('AppliedFontsManager', () => {
                 evict() {},
                 clear() {},
             };
-            const abortManager = new AppliedFontsManager({ cache: abortingCache as any, eviction });
+            const abortManager = new FontLifecycleManager({ cache: abortingCache as any, eviction });
 
             abortManager.touch([makeConfig('aborted')]);
             await vi.advanceTimersByTimeAsync(50);
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontBufferCache/FontBufferCache.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontBufferCache/FontBufferCache.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontBufferCache/FontBufferCache.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontBufferCache/FontBufferCache.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontBufferCache/FontBufferCache.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontBufferCache/FontBufferCache.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontBufferCache/FontBufferCache.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontBufferCache/FontBufferCache.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontEvictionPolicy/FontEvictionPolicy.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontEvictionPolicy/FontEvictionPolicy.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontEvictionPolicy/FontEvictionPolicy.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontEvictionPolicy/FontEvictionPolicy.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontLoadQueue/FontLoadQueue.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontLoadQueue/FontLoadQueue.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/fontLoadQueue/FontLoadQueue.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/fontLoadQueue/FontLoadQueue.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/generateFontKey/generateFontKey.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/generateFontKey/generateFontKey.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/generateFontKey/generateFontKey.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/generateFontKey/generateFontKey.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/getEffectiveConcurrency/getEffectiveConcurrency.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/getEffectiveConcurrency/getEffectiveConcurrency.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/getEffectiveConcurrency/getEffectiveConcurrency.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/getEffectiveConcurrency/getEffectiveConcurrency.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/getEffectiveConcurrency/getEffectiveConcurrency.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/getEffectiveConcurrency/getEffectiveConcurrency.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/getEffectiveConcurrency/getEffectiveConcurrency.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/getEffectiveConcurrency/getEffectiveConcurrency.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/index.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/index.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/index.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/index.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/loadFont/loadFont.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/loadFont/loadFont.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/loadFont/loadFont.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/loadFont/loadFont.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/loadFont/loadFont.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/yieldToMainThread/yieldToMainThread.test.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/yieldToMainThread/yieldToMainThread.test.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/yieldToMainThread/yieldToMainThread.test.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/yieldToMainThread/yieldToMainThread.test.ts
diff --git a/src/entities/Font/model/store/appliedFontsStore/utils/yieldToMainThread/yieldToMainThread.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/yieldToMainThread/yieldToMainThread.ts
similarity index 100%
rename from src/entities/Font/model/store/appliedFontsStore/utils/yieldToMainThread/yieldToMainThread.ts
rename to src/entities/Font/model/store/fontLifecycleManager/utils/yieldToMainThread/yieldToMainThread.ts
diff --git a/src/entities/Font/model/store/index.ts b/src/entities/Font/model/store/index.ts
index bc6e56a..97ebad0 100644
--- a/src/entities/Font/model/store/index.ts
+++ b/src/entities/Font/model/store/index.ts
@@ -1,9 +1,9 @@
-// Applied fonts manager
-export * from './appliedFontsStore/appliedFontsStore.svelte';
+// Font lifecycle manager (browser-side load + cache + eviction)
+export * from './fontLifecycleManager/fontLifecycleManager.svelte';
 
-// Single FontStore
+// Paginated catalog
 export {
-    createFontStore,
-    FontStore,
-    fontStore,
-} from './fontStore/fontStore.svelte';
+    createFontCatalogStore,
+    FontCatalogStore,
+    fontCatalogStore,
+} from './fontCatalogStore/fontCatalogStore.svelte';
diff --git a/src/entities/Font/model/types/index.ts b/src/entities/Font/model/types/index.ts
index f4edb26..b23390c 100644
--- a/src/entities/Font/model/types/index.ts
+++ b/src/entities/Font/model/types/index.ts
@@ -23,5 +23,5 @@ export type {
     FontCollectionState,
 } from './store';
 
-export * from './store/appliedFonts';
+export * from './store/fontLifecycle';
 export * from './typography';
diff --git a/src/entities/Font/model/types/store/appliedFonts.ts b/src/entities/Font/model/types/store/fontLifecycle.ts
similarity index 100%
rename from src/entities/Font/model/types/store/appliedFonts.ts
rename to src/entities/Font/model/types/store/fontLifecycle.ts
diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
index ff14ba7..0e370a6 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.stories.svelte
@@ -39,7 +39,7 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
         docs: {
             description: {
                 story:
-                    'Font that has never been loaded by appliedFontsManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
+                    'Font that has never been loaded by fontLifecycleManager. The component renders in its pending state: blurred, scaled down, and semi-transparent.',
             },
         },
     }}
@@ -58,7 +58,7 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
         docs: {
             description: {
                 story:
-                    'Uses Arial, a system font available in all browsers. Because appliedFontsManager 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.',
+                    '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.',
             },
         },
     }}
@@ -77,7 +77,7 @@ const fontArialBold = mockUnifiedFont({ id: 'arial-bold', name: 'Arial' });
         docs: {
             description: {
                 story:
-                    'Demonstrates passing a custom weight (700). The weight is forwarded to appliedFontsManager for font resolution; visually identical to the loaded state story until the manager confirms the font.',
+                    '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.',
             },
         },
     }}
diff --git a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
index fe12255..ae1e97c 100644
--- a/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
+++ b/src/entities/Font/ui/FontApplicator/FontApplicator.svelte
@@ -9,7 +9,7 @@ import type { Snippet } from 'svelte';
 import {
     DEFAULT_FONT_WEIGHT,
     type UnifiedFont,
-    appliedFontsManager,
+    fontLifecycleManager,
 } from '../../model';
 
 interface Props {
@@ -46,7 +46,7 @@ let {
 }: Props = $props();
 
 const status = $derived(
-    appliedFontsManager.getFontStatus(
+    fontLifecycleManager.getFontStatus(
         font.id,
         weight,
         font.features?.isVariable,
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.stories.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.stories.svelte
index caf0107..460dfbf 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.stories.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.stories.svelte
@@ -10,7 +10,7 @@ const { Story } = defineMeta({
         docs: {
             description: {
                 component:
-                    'Virtualized font list backed by the `fontStore` singleton. Handles font loading registration (pin/touch) for visible items and triggers infinite scroll pagination via `fontStore.nextPage()`. Because the component reads directly from the `fontStore` singleton, stories render against a live (but empty/loading) store — no font data will appear unless the API is reachable from the Storybook host.',
+                    'Virtualized font list backed by the `fontCatalogStore` singleton. Handles font loading registration (pin/touch) for visible items and triggers infinite scroll pagination via `fontCatalogStore.nextPage()`. Because the component reads directly from the `fontCatalogStore` singleton, stories render against a live (but empty/loading) store — no font data will appear unless the API is reachable from the Storybook host.',
             },
             story: { inline: false },
         },
@@ -33,7 +33,7 @@ import type { ComponentProps } from 'svelte';
         docs: {
             description: {
                 story:
-                    'Skeleton state shown while `fontStore.fonts` is empty and `fontStore.isLoading` is true. In a real session the skeleton fades out once the first page loads.',
+                    'Skeleton state shown while `fontCatalogStore.fonts` is empty and `fontCatalogStore.isLoading` is true. In a real session the skeleton fades out once the first page loads.',
             },
         },
     }}
@@ -63,7 +63,7 @@ import type { ComponentProps } from 'svelte';
         docs: {
             description: {
                 story:
-                    'No `skeleton` snippet provided. When `fontStore.fonts` is empty the underlying VirtualList renders its empty state directly.',
+                    'No `skeleton` snippet provided. When `fontCatalogStore.fonts` is empty the underlying VirtualList renders its empty state directly.',
             },
         },
     }}
@@ -86,7 +86,7 @@ import type { ComponentProps } from 'svelte';
         docs: {
             description: {
                 story:
-                    'Demonstrates how to configure a `children` snippet for item rendering. The list will be empty because `fontStore` is not populated in Storybook, but the template shows the expected slot shape: `{ item: UnifiedFont }`.',
+                    'Demonstrates how to configure a `children` snippet for item rendering. The list will be empty because `fontCatalogStore` is not populated in Storybook, but the template shows the expected slot shape: `{ item: UnifiedFont }`.',
             },
         },
     }}
diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 7d4cc84..9cb6bed 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -18,8 +18,8 @@ import { getFontUrl } from '../../lib';
 import {
     type FontLoadRequestConfig,
     type UnifiedFont,
-    appliedFontsManager,
-    fontStore,
+    fontCatalogStore,
+    fontLifecycleManager,
 } from '../../model';
 
 interface Props extends
@@ -51,13 +51,13 @@ let {
 }: Props = $props();
 
 const isLoading = $derived(
-    fontStore.isFetching || fontStore.isLoading,
+    fontCatalogStore.isFetching || fontCatalogStore.isLoading,
 );
 
 let visibleFonts = $state<UnifiedFont[]>([]);
 let isCatchingUp = $state(false);
 
-const showInitialSkeleton = $derived(!!skeleton && isLoading && fontStore.fonts.length === 0);
+const showInitialSkeleton = $derived(!!skeleton && isLoading && fontCatalogStore.fonts.length === 0);
 const showCatchupSkeleton = $derived(!!skeleton && isCatchingUp);
 
 function handleInternalVisibleChange(items: UnifiedFont[]) {
@@ -68,23 +68,23 @@ function handleInternalVisibleChange(items: UnifiedFont[]) {
 
 /**
  * Handle jump scroll — batch-load all missing pages then re-enable font loading.
- * Suppresses appliedFontsManager.touch() during catch-up to avoid loading
+ * Suppresses fontLifecycleManager.touch() during catch-up to avoid loading
  * font files for thousands of intermediate fonts.
  */
 async function handleJump(targetIndex: number) {
-    if (isCatchingUp || !fontStore.pagination.hasMore) {
+    if (isCatchingUp || !fontCatalogStore.pagination.hasMore) {
         return;
     }
     isCatchingUp = true;
     try {
-        await fontStore.fetchAllPagesTo(targetIndex);
+        await fontCatalogStore.fetchAllPagesTo(targetIndex);
     } finally {
         isCatchingUp = false;
     }
 }
 
 const debouncedTouch = debounce((configs: FontLoadRequestConfig[]) => {
-    appliedFontsManager.touch(configs);
+    fontLifecycleManager.touch(configs);
 }, 150);
 
 // Re-touch whenever visible set or weight changes — fixes weight-change gap
@@ -111,11 +111,11 @@ $effect(() => {
     const w = weight;
     const fonts = visibleFonts;
     for (const f of fonts) {
-        appliedFontsManager.pin(f.id, w, f.features?.isVariable);
+        fontLifecycleManager.pin(f.id, w, f.features?.isVariable);
     }
     return () => {
         for (const f of fonts) {
-            appliedFontsManager.unpin(f.id, w, f.features?.isVariable);
+            fontLifecycleManager.unpin(f.id, w, f.features?.isVariable);
         }
     };
 });
@@ -125,12 +125,12 @@ $effect(() => {
  */
 function loadMore() {
     if (
-        !fontStore.pagination.hasMore
-        || fontStore.isFetching
+        !fontCatalogStore.pagination.hasMore
+        || fontCatalogStore.isFetching
     ) {
         return;
     }
-    fontStore.nextPage();
+    fontCatalogStore.nextPage();
 }
 
 /**
@@ -140,12 +140,12 @@ function loadMore() {
  * of the loaded items. Only fetches if there are more pages available.
  */
 function handleNearBottom(_lastVisibleIndex: number) {
-    const { hasMore } = fontStore.pagination;
+    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 && !fontStore.isFetching && !isCatchingUp) {
+    if (hasMore && !fontCatalogStore.isFetching && !isCatchingUp) {
         loadMore();
     }
 }
@@ -160,8 +160,8 @@ function handleNearBottom(_lastVisibleIndex: number) {
     {:else}
         <!-- VirtualList persists during pagination - no destruction/recreation -->
         <VirtualList
-            items={fontStore.fonts}
-            total={fontStore.pagination.total}
+            items={fontCatalogStore.fonts}
+            total={fontCatalogStore.pagination.total}
             isLoading={isLoading || isCatchingUp}
             onVisibleItemsChange={handleInternalVisibleChange}
             onNearBottom={handleNearBottom}
diff --git a/src/features/FilterAndSortFonts/model/index.ts b/src/features/FilterAndSortFonts/model/index.ts
index b37c7be..755643a 100644
--- a/src/features/FilterAndSortFonts/model/index.ts
+++ b/src/features/FilterAndSortFonts/model/index.ts
@@ -38,7 +38,7 @@ export {
 } from './store/appliedFilterStore/appliedFilterStore.svelte';
 
 /**
- * Side-effect import: installs the global appliedFilterStore+sortStore → fontStore
+ * Side-effect import: installs the global appliedFilterStore+sortStore → fontCatalogStore
  * bridge on first import of this feature barrel. No exports.
  */
 import './store/bindings.svelte';
diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
index d1ff7c7..ed955fa 100644
--- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts
@@ -1,6 +1,6 @@
 /**
  * Bridges feature-level UI state (appliedFilterStore + sortStore) to the
- * entity-level fontStore query params.
+ * entity-level fontCatalogStore query params.
  *
  * Centralizing this here means consumers (Search, FontSearch,
  * FilterControls, etc.) bind to the manager/store directly without
@@ -9,7 +9,7 @@
  * observer, so it lives at module scope, not in any individual widget.
  */
 
-import { fontStore } from '$entities/Font';
+import { fontCatalogStore } from '$entities/Font';
 import { untrack } from 'svelte';
 import { mapAppliedFiltersToParams } from '../../lib/mapper/mapAppliedFiltersToParams';
 import { appliedFilterStore } from './appliedFilterStore/appliedFilterStore.svelte';
@@ -42,20 +42,20 @@ $effect.root(() => {
     });
 
     /**
-     * Mirror filter selections + debounced search query into fontStore params.
-     * untrack the write so fontStore's internal $state reads don't feed back
+     * Mirror filter selections + debounced search query into fontCatalogStore params.
+     * untrack the write so fontCatalogStore's internal $state reads don't feed back
      * into this effect's dependency graph.
      */
     $effect(() => {
         const params = mapAppliedFiltersToParams(appliedFilterStore);
-        untrack(() => fontStore.setParams(params));
+        untrack(() => fontCatalogStore.setParams(params));
     });
 
     /**
-     * Mirror sort selection into fontStore.
+     * Mirror sort selection into fontCatalogStore.
      */
     $effect(() => {
         const apiSort = sortStore.apiValue;
-        untrack(() => fontStore.setSort(apiSort));
+        untrack(() => fontCatalogStore.setSort(apiSort));
     });
 });
diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index d1faa3e..e4051cd 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -58,7 +58,7 @@ export interface VirtualizerOptions {
      * when those values change, `offsets` and `totalSize` recompute instantly.
      *
      * For font preview rows, pass a closure that reads
-     * `appliedFontsManager.statuses` so the virtualizer recalculates heights
+     * `fontLifecycleManager.statuses` so the virtualizer recalculates heights
      * as fonts finish loading, eliminating the DOM-measurement snap on load.
      */
     estimateSize: (index: number) => number;
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 1c6bc3c..124ba24 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -16,8 +16,8 @@
 import {
     type FontLoadRequestConfig,
     type UnifiedFont,
-    appliedFontsManager,
-    fontStore,
+    fontCatalogStore,
+    fontLifecycleManager,
     getFontUrl,
 } from '$entities/Font';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -140,7 +140,7 @@ export class ComparisonStore {
                 });
 
                 if (configs.length > 0) {
-                    appliedFontsManager.touch(configs);
+                    fontLifecycleManager.touch(configs);
                     this.#checkFontsLoaded();
                 }
             });
@@ -151,7 +151,7 @@ export class ComparisonStore {
                     return;
                 }
 
-                const fonts = fontStore.fonts;
+                const fonts = fontCatalogStore.fonts;
                 if (fonts.length >= 2) {
                     untrack(() => {
                         const id1 = fonts[0].id;
@@ -168,17 +168,17 @@ export class ComparisonStore {
                 const fb = this.#fontB;
                 const w = typographySettingsStore.weight;
                 if (fa) {
-                    appliedFontsManager.pin(fa.id, w, fa.features?.isVariable);
+                    fontLifecycleManager.pin(fa.id, w, fa.features?.isVariable);
                 }
                 if (fb) {
-                    appliedFontsManager.pin(fb.id, w, fb.features?.isVariable);
+                    fontLifecycleManager.pin(fb.id, w, fb.features?.isVariable);
                 }
                 return () => {
                     if (fa) {
-                        appliedFontsManager.unpin(fa.id, w, fa.features?.isVariable);
+                        fontLifecycleManager.unpin(fa.id, w, fa.features?.isVariable);
                     }
                     if (fb) {
-                        appliedFontsManager.unpin(fb.id, w, fb.features?.isVariable);
+                        fontLifecycleManager.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 5a3146e..21fb026 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.test.ts
@@ -55,8 +55,8 @@ vi.mock('$entities/Font', async importOriginal => {
     const actual = await importOriginal<typeof import('$entities/Font')>();
     return {
         ...actual,
-        fontStore: { fonts: [] },
-        appliedFontsManager: {
+        fontCatalogStore: { fonts: [] },
+        fontLifecycleManager: {
             touch: vi.fn(),
             pin: vi.fn(),
             unpin: vi.fn(),
@@ -85,8 +85,8 @@ vi.mock('$features/AdjustTypography/model', () => ({
 }));
 
 import {
-    appliedFontsManager,
-    fontStore,
+    fontCatalogStore,
+    fontLifecycleManager,
 } from '$entities/Font';
 import * as proxyFonts from '$entities/Font/api/proxy/proxyFonts';
 import { ComparisonStore } from './comparisonStore.svelte';
@@ -100,7 +100,7 @@ describe('ComparisonStore', () => {
         vi.clearAllMocks();
         mockStorage._value = { fontAId: null, fontBId: null };
         mockStorage._clear.mockClear();
-        (fontStore as any).fonts = [];
+        (fontCatalogStore as any).fonts = [];
 
         // Default: fetchFontsByIds returns empty so tests that don't care don't hang
         vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([]);
@@ -155,7 +155,7 @@ describe('ComparisonStore', () => {
 
     describe('Default Fallbacks', () => {
         it('should update storage with default IDs when storage is empty', async () => {
-            (fontStore as any).fonts = [mockFontA, mockFontB];
+            (fontCatalogStore as any).fonts = [mockFontA, mockFontB];
             vi.spyOn(proxyFonts, 'fetchFontsByIds').mockResolvedValue([mockFontA, mockFontB]);
 
             new ComparisonStore();
@@ -212,12 +212,12 @@ describe('ComparisonStore', () => {
             new ComparisonStore();
 
             await vi.waitFor(() => {
-                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                expect(fontLifecycleManager.pin).toHaveBeenCalledWith(
                     mockFontA.id,
                     400,
                     mockFontA.features?.isVariable,
                 );
-                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                expect(fontLifecycleManager.pin).toHaveBeenCalledWith(
                     mockFontB.id,
                     400,
                     mockFontB.features?.isVariable,
@@ -238,12 +238,12 @@ describe('ComparisonStore', () => {
             store.fontA = mockFontC;
 
             await vi.waitFor(() => {
-                expect(appliedFontsManager.unpin).toHaveBeenCalledWith(
+                expect(fontLifecycleManager.unpin).toHaveBeenCalledWith(
                     mockFontA.id,
                     400,
                     mockFontA.features?.isVariable,
                 );
-                expect(appliedFontsManager.pin).toHaveBeenCalledWith(
+                expect(fontLifecycleManager.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 5bb6061..70b9fb7 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -9,8 +9,8 @@ import {
     FontVirtualList,
     type UnifiedFont,
     VIRTUAL_INDEX_NOT_LOADED,
-    appliedFontsManager,
-    fontStore,
+    fontCatalogStore,
+    fontLifecycleManager,
 } from '$entities/Font';
 import { getSkeletonWidth } from '$shared/lib/utils';
 import {
@@ -36,7 +36,7 @@ function getVirtualIndex(fontId: string | undefined): number {
     if (!fontId) {
         return -1;
     }
-    const idx = fontStore.fonts.findIndex(f => f.id === fontId);
+    const idx = fontCatalogStore.fonts.findIndex(f => f.id === fontId);
     if (idx === -1) {
         return VIRTUAL_INDEX_NOT_LOADED;
     }
@@ -77,11 +77,11 @@ function handleSelect(font: UnifiedFont) {
 /**
  * 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
- * appliedFontsManager.getFontStatus(), so each row re-renders reactively
+ * fontLifecycleManager.getFontStatus(), so each row re-renders reactively
  * when its file arrives.
  */
 function isFontReady(font: UnifiedFont): boolean {
-    const status = appliedFontsManager.getFontStatus(
+    const status = fontLifecycleManager.getFontStatus(
         font.id,
         DEFAULT_FONT_WEIGHT,
         font.features?.isVariable,
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index 388412e..73bc079 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -2,7 +2,7 @@
     Component: Search
     Typeface search input for the comparison view.
     Writes through appliedFilterStore; the global bridge in $features/FilterAndSortFonts
-    propagates the value into fontStore.
+    propagates the value into fontCatalogStore.
 -->
 <script lang="ts">
 import { appliedFilterStore } from '$features/FilterAndSortFonts';
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 8da5e15..48b8076 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -7,9 +7,9 @@
 <script lang="ts">
 import {
     FontVirtualList,
-    appliedFontsManager,
     createFontRowSizeResolver,
-    fontStore,
+    fontCatalogStore,
+    fontLifecycleManager,
 } from '$entities/Font';
 import {
     TypographyMenu,
@@ -57,17 +57,17 @@ const checkPosition = throttle(() => {
 }, 100);
 
 // Resolver recreated when typography values change. The returned closure reads
-// appliedFontsManager.statuses (a SvelteMap) on every call, so any font status
+// fontLifecycleManager.statuses (a SvelteMap) on every call, so any font status
 // change triggers a full offsets recompute in createVirtualizer — no DOM snap.
 const fontRowHeight = $derived.by(() =>
     createFontRowSizeResolver({
-        getFonts: () => fontStore.fonts,
+        getFonts: () => fontCatalogStore.fonts,
         getWeight: () => typographySettingsStore.weight,
         getPreviewText: () => text,
         getContainerWidth: () => containerWidth,
         getFontSizePx: () => typographySettingsStore.renderedSize,
         getLineHeightPx: () => typographySettingsStore.height * typographySettingsStore.renderedSize,
-        getStatus: key => appliedFontsManager.statuses.get(key),
+        getStatus: key => fontLifecycleManager.statuses.get(key),
         contentHorizontalPadding: SAMPLER_CONTENT_PADDING_X,
         chromeHeight: SAMPLER_CHROME_HEIGHT,
         fallbackHeight: SAMPLER_FALLBACK_HEIGHT,
diff --git a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
index 03b9ced..f926be3 100644
--- a/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
+++ b/src/widgets/SampleList/ui/SampleListSection/SampleListSection.svelte
@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import { NavigationWrapper } from '$entities/Breadcrumb';
-import { fontStore } from '$entities/Font';
+import { fontCatalogStore } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import { cn } from '$shared/lib';
 import {
@@ -36,7 +36,7 @@ const responsive = getContext<ResponsiveManager>('responsive');
             id="sample_set"
             title="Sample Set"
             headerTitle="visual_output"
-            headerSubtitle="items_total: {fontStore.pagination.total ?? 0}"
+            headerSubtitle="items_total: {fontCatalogStore.pagination.total ?? 0}"
             headerAction={registerAction}
         >
             {#snippet headerContent()}
-- 
2.52.0


From f92577608a472479f7319e151b36ce8b363092a1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 20:12:48 +0300
Subject: [PATCH 14/29] refactor(Font): use pretext layout() directly in row
 size resolver
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

createFontRowSizeResolver was reaching into TextLayoutEngine, which
internally called pretext's heavy layoutWithLines and then walked
per-grapheme cursors to build chars arrays. The resolver discarded all
that work and used only totalHeight.

Replace with direct prepare + layout from @chenglou/pretext — pretext
docs explicitly recommend layout() (not layoutWithLines) for the resize
hot path: pure arithmetic on cached segment widths, no canvas calls, no
string allocations.

Test spies on TextLayoutEngine.prototype.layout migrated to vi.mock-ed
pretext layout (pretext's ESM exports are frozen — vi.spyOn fails with
"Cannot redefine property").

TextLayoutEngine marked @deprecated since it has no remaining
consumers; slated for removal after a release cycle.
---
 .../createFontRowSizeResolver.test.ts         | 24 ++++++++++++++-----
 .../sizeResolver/createFontRowSizeResolver.ts | 14 +++++++----
 .../TextLayoutEngine.svelte.ts                |  8 +++++++
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
index 33525d6..a274b40 100644
--- a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
+++ b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.test.ts
@@ -1,7 +1,19 @@
 // @vitest-environment jsdom
-import { TextLayoutEngine } from '$shared/lib';
 import { installCanvasMock } from '$shared/lib/helpers/__mocks__/canvas';
-import { clearCache } from '@chenglou/pretext';
+import {
+    clearCache,
+    layout,
+} from '@chenglou/pretext';
+
+// Wrap pretext's `layout` in a spy-able mock so tests can assert call counts.
+// `vi.mock` is hoisted, so the import above receives the mocked module.
+vi.mock('@chenglou/pretext', async () => {
+    const actual = await vi.importActual<typeof import('@chenglou/pretext')>('@chenglou/pretext');
+    return {
+        ...actual,
+        layout: vi.fn(actual.layout),
+    };
+});
 import {
     beforeEach,
     describe,
@@ -112,13 +124,13 @@ describe('createFontRowSizeResolver', () => {
         const { resolver } = makeResolver();
         statusMap.set('inter@400', 'loaded');
 
-        const layoutSpy = vi.spyOn(TextLayoutEngine.prototype, 'layout');
+        const layoutSpy = vi.mocked(layout);
+        layoutSpy.mockClear();
 
         resolver(0);
         resolver(0);
 
         expect(layoutSpy).toHaveBeenCalledTimes(1);
-        layoutSpy.mockRestore();
     });
 
     it('calls layout() again when containerWidth changes (cache miss)', () => {
@@ -126,14 +138,14 @@ describe('createFontRowSizeResolver', () => {
         const { resolver } = makeResolver({ getContainerWidth: () => width });
         statusMap.set('inter@400', 'loaded');
 
-        const layoutSpy = vi.spyOn(TextLayoutEngine.prototype, 'layout');
+        const layoutSpy = vi.mocked(layout);
+        layoutSpy.mockClear();
 
         resolver(0);
         width = 100;
         resolver(0);
 
         expect(layoutSpy).toHaveBeenCalledTimes(2);
-        layoutSpy.mockRestore();
     });
 
     it('returns greater height when container narrows (more wrapping)', () => {
diff --git a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
index 93e76fa..97e089c 100644
--- a/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
+++ b/src/entities/Font/lib/sizeResolver/createFontRowSizeResolver.ts
@@ -1,4 +1,7 @@
-import { TextLayoutEngine } from '$shared/lib';
+import {
+    layout,
+    prepare,
+} from '@chenglou/pretext';
 import { generateFontKey } from '../../model/store/fontLifecycleManager/utils/generateFontKey/generateFontKey';
 import type {
     FontLoadStatus,
@@ -79,14 +82,13 @@ export interface FontRowSizeResolverOptions {
  * no DOM snap occurs.
  *
  * **Caching:** A `Map` keyed by `fontCssString|text|contentWidth|lineHeightPx`
- * prevents redundant `TextLayoutEngine.layout()` calls. The cache is invalidated
+ * prevents redundant `pretext.layout()` calls. The cache is invalidated
  * naturally because a change in any input produces a different cache key.
  *
  * @param options - Configuration and getter functions (all injected for testability).
  * @returns A function `(rowIndex: number) => number` for use as `VirtualList.itemHeight`.
  */
 export function createFontRowSizeResolver(options: FontRowSizeResolverOptions): (rowIndex: number) => number {
-    const engine = new TextLayoutEngine();
     // Key: `${fontCssString}|${text}|${contentWidth}|${lineHeightPx}`
     const cache = new Map<string, number>();
 
@@ -126,7 +128,11 @@ export function createFontRowSizeResolver(options: FontRowSizeResolverOptions):
             return cached;
         }
 
-        const { totalHeight } = engine.layout(previewText, fontCssString, contentWidth, lineHeightPx);
+        // Pretext docs recommend `layout()` (not `layoutWithLines`) for the
+        // resize hot path — pure arithmetic on cached segment widths, no canvas
+        // calls, no string allocations.
+        const prepared = prepare(previewText, fontCssString);
+        const { height: totalHeight } = layout(prepared, contentWidth, lineHeightPx);
         const result = totalHeight + options.chromeHeight;
         cache.set(cacheKey, result);
         return result;
diff --git a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts b/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
index b581905..3b7b1f9 100644
--- a/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
+++ b/src/shared/lib/helpers/TextLayoutEngine/TextLayoutEngine.svelte.ts
@@ -70,6 +70,14 @@ export interface LayoutResult {
  * **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 {
     /**
-- 
2.52.0


From e3b489f1736f5466c569d2426a1cc6e9eb5fce9c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 20:30:26 +0300
Subject: [PATCH 15/29] =?UTF-8?q?refactor:=20extract=20magic=20constants?=
 =?UTF-8?q?=20=E2=80=94=20wave=201=20(UX,=20API,=20storage)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use existing MULTIPLIER_S/M/L from \$entities/Font in SliderArea instead
  of inlining the 0.5/0.75/1 literals (constants already existed but were
  duplicated at the call site).
- Centralize API base URL in \$shared/api/endpoints.ts (was duplicated
  between proxyFonts and FilterAndSortFonts filters api).
- Promote every 'glyphdiff:...' localStorage key to a named module-level
  STORAGE_KEY constant. Test files now import the source constant rather
  than redeclaring it (eliminates silent-typo divergence risk).
---
 src/entities/Font/api/proxy/proxyFonts.ts     |  6 ++++--
 .../typographySettingsStore.svelte.ts         | 14 ++++++++++++--
 .../store/ThemeManager/ThemeManager.svelte.ts |  4 +++-
 .../store/ThemeManager/ThemeManager.test.ts   |  3 +--
 .../FilterAndSortFonts/api/filters/filters.ts |  3 ++-
 src/shared/api/endpoints.ts                   | 19 +++++++++++++++++++
 .../model/stores/comparisonStore.svelte.ts    |  4 +++-
 .../ui/SliderArea/SliderArea.svelte           | 13 +++++++++----
 .../stores/layoutStore/layoutStore.svelte.ts  |  2 +-
 .../stores/layoutStore/layoutStore.test.ts    |  3 +--
 10 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 src/shared/api/endpoints.ts

diff --git a/src/entities/Font/api/proxy/proxyFonts.ts b/src/entities/Font/api/proxy/proxyFonts.ts
index 3fdccbe..de299dc 100644
--- a/src/entities/Font/api/proxy/proxyFonts.ts
+++ b/src/entities/Font/api/proxy/proxyFonts.ts
@@ -29,10 +29,12 @@ export function seedFontCache(fonts: UnifiedFont[]): void {
     });
 }
 
+import { API_ENDPOINTS } from '$shared/api/endpoints';
+
 /**
- * Proxy API base URL
+ * Proxy API endpoint for font resources.
  */
-const PROXY_API_URL = 'https://api.glyphdiff.com/api/v1/fonts' as const;
+const PROXY_API_URL = API_ENDPOINTS.fonts;
 
 /**
  * Proxy API parameters
diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 2365196..5df2a8b 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -297,6 +297,16 @@ export class TypographySettingsStore {
     }
 }
 
+/**
+ * Default factory storage key — used when a caller doesn't pass one.
+ */
+const DEFAULT_STORAGE_KEY = 'glyphdiff:typography';
+
+/**
+ * Storage key used by the app-wide singleton (scoped to comparison view).
+ */
+const COMPARISON_STORAGE_KEY = 'glyphdiff:comparison:typography';
+
 /**
  * Creates a typography control manager
  *
@@ -306,7 +316,7 @@ export class TypographySettingsStore {
  */
 export function createTypographySettingsStore(
     configs: ControlModel<ControlId>[],
-    storageId: string = 'glyphdiff:typography',
+    storageId: string = DEFAULT_STORAGE_KEY,
 ) {
     const storage = createPersistentStore<TypographySettings>(storageId, {
         fontSize: DEFAULT_FONT_SIZE,
@@ -322,5 +332,5 @@ export function createTypographySettingsStore(
  */
 export const typographySettingsStore = createTypographySettingsStore(
     DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    'glyphdiff:comparison:typography',
+    COMPARISON_STORAGE_KEY,
 );
diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
index 540f0e2..b7523c2 100644
--- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
+++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.svelte.ts
@@ -30,6 +30,8 @@
 
 import { createPersistentStore } from '$shared/lib';
 
+export const STORAGE_KEY = 'glyphdiff:theme';
+
 type Theme = 'light' | 'dark';
 type ThemeSource = 'system' | 'user';
 
@@ -56,7 +58,7 @@ class ThemeManager {
     /**
      * Persistent storage for user's theme preference
      */
-    #store = createPersistentStore<Theme | null>('glyphdiff:theme', null);
+    #store = createPersistentStore<Theme | null>(STORAGE_KEY, null);
     /**
      * Bound handler for system theme change events
      */
diff --git a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts
index 2018e0f..9d8adce 100644
--- a/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts
+++ b/src/features/ChangeAppTheme/model/store/ThemeManager/ThemeManager.test.ts
@@ -40,8 +40,7 @@ import { ThemeManager } from './ThemeManager.svelte';
  * - MediaQueryList listener management
  */
 
-// Storage key used by ThemeManager
-const STORAGE_KEY = 'glyphdiff:theme';
+import { STORAGE_KEY } from './ThemeManager.svelte';
 
 // Helper type for MediaQueryList event handler
 type MediaQueryListCallback = (this: MediaQueryList, ev: MediaQueryListEvent) => void;
diff --git a/src/features/FilterAndSortFonts/api/filters/filters.ts b/src/features/FilterAndSortFonts/api/filters/filters.ts
index 822c968..98f5de2 100644
--- a/src/features/FilterAndSortFonts/api/filters/filters.ts
+++ b/src/features/FilterAndSortFonts/api/filters/filters.ts
@@ -8,8 +8,9 @@
  */
 
 import { api } from '$shared/api/api';
+import { API_ENDPOINTS } from '$shared/api/endpoints';
 
-const PROXY_API_URL = 'https://api.glyphdiff.com/api/v1/filters' as const;
+const PROXY_API_URL = API_ENDPOINTS.filters;
 
 /**
  * Filter metadata type from backend
diff --git a/src/shared/api/endpoints.ts b/src/shared/api/endpoints.ts
new file mode 100644
index 0000000..30884df
--- /dev/null
+++ b/src/shared/api/endpoints.ts
@@ -0,0 +1,19 @@
+/**
+ * Centralized backend endpoint definitions.
+ *
+ * One source of truth for the proxy API base URL — individual resource
+ * modules (proxyFonts, filters) append their own paths.
+ */
+
+export const API_BASE_URL = 'https://api.glyphdiff.com/api/v1' as const;
+
+export const API_ENDPOINTS = {
+    /**
+     * Font catalog + per-id detail + batch lookup
+     */
+    fonts: `${API_BASE_URL}/fonts`,
+    /**
+     * Filter metadata (providers, categories, subsets)
+     */
+    filters: `${API_BASE_URL}/filters`,
+} as const;
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 124ba24..0d8a73a 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -42,8 +42,10 @@ interface ComparisonState {
 
 export type Side = 'A' | 'B';
 
+const STORAGE_KEY = 'glyphdiff:comparison';
+
 // Persistent storage for selected comparison fonts
-const storage = createPersistentStore<ComparisonState>('glyphdiff:comparison', {
+const storage = createPersistentStore<ComparisonState>(STORAGE_KEY, {
     fontAId: null,
     fontBId: null,
 });
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 2d3ca95..59142e8 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -8,6 +8,11 @@
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
 -->
 <script lang="ts">
+import {
+    MULTIPLIER_L,
+    MULTIPLIER_M,
+    MULTIPLIER_S,
+} from '$entities/Font';
 import { TypographyMenu } from '$features/AdjustTypography';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
 import {
@@ -122,16 +127,16 @@ $effect(() => {
     }
     switch (true) {
         case responsive.isMobile:
-            typography.multiplier = 0.5;
+            typography.multiplier = MULTIPLIER_S;
             break;
         case responsive.isTablet:
-            typography.multiplier = 0.75;
+            typography.multiplier = MULTIPLIER_M;
             break;
         case responsive.isDesktop:
-            typography.multiplier = 1;
+            typography.multiplier = MULTIPLIER_L;
             break;
         default:
-            typography.multiplier = 1;
+            typography.multiplier = MULTIPLIER_L;
     }
 });
 
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
index a2975c5..c1f4e8b 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.svelte.ts
@@ -28,7 +28,7 @@ interface LayoutConfig {
     mode: LayoutMode;
 }
 
-const STORAGE_KEY = 'glyphdiff:sample-list-layout';
+export const STORAGE_KEY = 'glyphdiff:sample-list-layout';
 const SM_GAP_PX = 16;
 const MD_GAP_PX = 24;
 
diff --git a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
index cd3483d..6dc2d19 100644
--- a/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
+++ b/src/widgets/SampleList/model/stores/layoutStore/layoutStore.test.ts
@@ -16,8 +16,7 @@ async function flushEffects() {
     await Promise.resolve();
 }
 
-// Storage key used by LayoutManager
-const STORAGE_KEY = 'glyphdiff:sample-list-layout';
+import { STORAGE_KEY } from './layoutStore.svelte';
 
 describe('layoutStore', () => {
     // Default viewport for most tests (desktop large - >= 1536px)
-- 
2.52.0


From ccef3cf7bb7162b5a4f4b86376637836b796caa7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 20:33:46 +0300
Subject: [PATCH 16/29] =?UTF-8?q?refactor:=20extract=20magic=20constants?=
 =?UTF-8?q?=20=E2=80=94=20wave=202=20(TanStack=20Query=20defaults)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promote the duplicated query lifecycle constants in \$shared/api/queryClient.ts:

- staleTime (5 minutes) -> DEFAULT_QUERY_STALE_TIME_MS
- gcTime (10 minutes)   -> DEFAULT_QUERY_GC_TIME_MS
- retry (3)             -> QUERY_RETRY_COUNT
- retryDelay (1s base, 30s cap) -> QUERY_RETRY_BASE_DELAY_MS + QUERY_RETRY_MAX_DELAY_MS

fontCatalogStore and availableFilterStore now import the stale/gc
constants instead of re-deriving '5 * 60 * 1000' / '10 * 60 * 1000'.

fontCatalogStore.svelte.spec.ts's queryClient mock now passes through
the new named exports via importOriginal so the consumer's imports
resolve.
---
 .../fontCatalogStore.svelte.spec.ts           | 14 ++++--
 .../fontCatalogStore.svelte.ts                | 10 ++--
 .../availableFilterStore.svelte.ts            | 10 ++--
 src/shared/api/queryClient.ts                 | 47 +++++++++++++------
 4 files changed, 55 insertions(+), 26 deletions(-)

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 5cdae3a..f287091 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts
@@ -19,11 +19,15 @@ import {
 import type { UnifiedFont } from '../../types';
 import { FontCatalogStore } from './fontCatalogStore.svelte';
 
-vi.mock('$shared/api/queryClient', () => ({
-    queryClient: new QueryClient({
-        defaultOptions: { queries: { retry: 0, gcTime: 0 } },
-    }),
-}));
+vi.mock('$shared/api/queryClient', async importOriginal => {
+    const actual = await importOriginal<typeof import('$shared/api/queryClient')>();
+    return {
+        ...actual,
+        queryClient: new QueryClient({
+            defaultOptions: { queries: { retry: 0, gcTime: 0 } },
+        }),
+    };
+});
 vi.mock('../../../api', () => ({ fetchProxyFonts: vi.fn() }));
 
 import { queryClient } from '$shared/api/queryClient';
diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
index 165a5ab..aea0ed0 100644
--- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
+++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts
@@ -1,4 +1,8 @@
-import { queryClient } from '$shared/api/queryClient';
+import {
+    DEFAULT_QUERY_GC_TIME_MS,
+    DEFAULT_QUERY_STALE_TIME_MS,
+    queryClient,
+} from '$shared/api/queryClient';
 import {
     type InfiniteData,
     InfiniteQueryObserver,
@@ -427,8 +431,8 @@ export class FontCatalogStore {
                 const next = lastPage.offset + lastPage.limit;
                 return next < lastPage.total ? { offset: next } : undefined;
             },
-            staleTime: hasFilters ? 0 : 5 * 60 * 1000,
-            gcTime: 10 * 60 * 1000,
+            staleTime: hasFilters ? 0 : DEFAULT_QUERY_STALE_TIME_MS,
+            gcTime: DEFAULT_QUERY_GC_TIME_MS,
         };
     }
 
diff --git a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
index 6aa3d6f..7eff164 100644
--- a/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
+++ b/src/features/FilterAndSortFonts/model/store/availableFilterStore/availableFilterStore.svelte.ts
@@ -17,7 +17,11 @@
 
 import { fetchProxyFilters } from '$features/FilterAndSortFonts/api/filters/filters';
 import type { FilterMetadata } from '$features/FilterAndSortFonts/api/filters/filters';
-import { queryClient } from '$shared/api/queryClient';
+import {
+    DEFAULT_QUERY_GC_TIME_MS,
+    DEFAULT_QUERY_STALE_TIME_MS,
+    queryClient,
+} from '$shared/api/queryClient';
 import {
     type QueryKey,
     QueryObserver,
@@ -81,8 +85,8 @@ export class AvailableFilterStore {
         return {
             queryKey: this.getQueryKey(),
             queryFn: () => this.fetchFn(),
-            staleTime: 5 * 60 * 1000, // 5 minutes
-            gcTime: 10 * 60 * 1000, // 10 minutes
+            staleTime: DEFAULT_QUERY_STALE_TIME_MS,
+            gcTime: DEFAULT_QUERY_GC_TIME_MS,
         };
     }
 
diff --git a/src/shared/api/queryClient.ts b/src/shared/api/queryClient.ts
index cf16c92..7f9ddba 100644
--- a/src/shared/api/queryClient.ts
+++ b/src/shared/api/queryClient.ts
@@ -1,5 +1,31 @@
 import { QueryClient } from '@tanstack/query-core';
 
+/**
+ * Data remains fresh for this long after fetch. Stores that override
+ * staleness (e.g. filtered queries) can use 0 to bypass.
+ */
+export const DEFAULT_QUERY_STALE_TIME_MS = 5 * 60 * 1000;
+
+/**
+ * Unused cache entries are garbage collected after this long.
+ */
+export const DEFAULT_QUERY_GC_TIME_MS = 10 * 60 * 1000;
+
+/**
+ * How many times a failed query is retried before surfacing the error.
+ */
+export const QUERY_RETRY_COUNT = 3;
+
+/**
+ * Base delay for exponential retry backoff.
+ */
+export const QUERY_RETRY_BASE_DELAY_MS = 1000;
+
+/**
+ * Upper bound on retry delay regardless of attempt index.
+ */
+export const QUERY_RETRY_MAX_DELAY_MS = 30000;
+
 /**
  * TanStack Query client instance
  *
@@ -15,14 +41,8 @@ import { QueryClient } from '@tanstack/query-core';
 export const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
-            /**
-             * Data remains fresh for 5 minutes after fetch
-             */
-            staleTime: 5 * 60 * 1000,
-            /**
-             * Unused cache entries are removed after 10 minutes
-             */
-            gcTime: 10 * 60 * 1000,
+            staleTime: DEFAULT_QUERY_STALE_TIME_MS,
+            gcTime: DEFAULT_QUERY_GC_TIME_MS,
             /**
              * Don't refetch when window regains focus
              */
@@ -31,15 +51,12 @@ export const queryClient = new QueryClient({
              * Refetch on mount if data is stale
              */
             refetchOnMount: true,
+            retry: QUERY_RETRY_COUNT,
             /**
-             * Retry failed requests up to 3 times
+             * Exponential backoff: 1s, 2s, 4s, 8s... capped at 30s
              */
-            retry: 3,
-            /**
-             * Exponential backoff for retries
-             * 1s, 2s, 4s, 8s... capped at 30s
-             */
-            retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+            retryDelay: attemptIndex =>
+                Math.min(QUERY_RETRY_BASE_DELAY_MS * 2 ** attemptIndex, QUERY_RETRY_MAX_DELAY_MS),
         },
     },
 });
-- 
2.52.0


From 2bb43797f0ca0a7137647ddc24144d8104fe90ba Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 21:13:38 +0300
Subject: [PATCH 17/29] =?UTF-8?q?refactor:=20extract=20magic=20constants?=
 =?UTF-8?q?=20=E2=80=94=20wave=203=20(font=20lifecycle)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promote font-loading scheduling and lifecycle tunables to named
module-level constants:

- comparisonStore: FONT_READY_FALLBACK_MS (1000ms) — UI unblock safety net
- fontLifecycleManager:
  - PURGE_INTERVAL_MS (60000) — periodic eviction sweep
  - IDLE_CALLBACK_TIMEOUT_MS (150) — requestIdleCallback timeout
  - SCHEDULE_FALLBACK_MS (16) — setTimeout fallback (~60fps)
  - YIELD_INTERVAL_MS (8) — parse-loop yield budget for non-Chromium
  - CRITICAL_FONT_WEIGHTS ([400, 700]) — data-saver allowlist
- FontEvictionPolicy: DEFAULT_FONT_TTL_MS (5 minutes)
- FontLoadQueue: FONT_LOAD_MAX_RETRIES (3)

No behavior changes — values preserved exactly. Class-private fields
that mirrored these constants are removed in favor of module scope.
---
 .../fontLifecycleManager.svelte.ts            | 42 +++++++++++++++----
 .../fontEvictionPolicy/FontEvictionPolicy.ts  |  9 +++-
 .../utils/fontLoadQueue/FontLoadQueue.ts      | 10 +++--
 .../model/stores/comparisonStore.svelte.ts    |  9 +++-
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
index 1a4755e..9439a87 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/fontLifecycleManager.svelte.ts
@@ -17,6 +17,35 @@ import { FontBufferCache } from './utils/fontBufferCache/FontBufferCache';
 import { FontEvictionPolicy } from './utils/fontEvictionPolicy/FontEvictionPolicy';
 import { FontLoadQueue } from './utils/fontLoadQueue/FontLoadQueue';
 
+/**
+ * How often the periodic eviction sweep runs.
+ */
+const PURGE_INTERVAL_MS = 60000;
+
+/**
+ * Timeout for `requestIdleCallback`. After this elapses, the callback is
+ * forced to run regardless of whether the browser is idle.
+ */
+const IDLE_CALLBACK_TIMEOUT_MS = 150;
+
+/**
+ * setTimeout fallback delay when `requestIdleCallback` is unavailable.
+ * ~16ms ≈ one frame at 60fps.
+ */
+const SCHEDULE_FALLBACK_MS = 16;
+
+/**
+ * How often the parse loop yields back to the main thread when the browser
+ * does not provide `isInputPending` (non-Chromium fallback).
+ */
+const YIELD_INTERVAL_MS = 8;
+
+/**
+ * Font weights treated as "critical" in data-saver mode. Other weights are
+ * skipped to reduce network usage; variable fonts bypass this filter.
+ */
+const CRITICAL_FONT_WEIGHTS = [400, 700];
+
 interface FontLifecycleManagerDeps {
     cache?: FontBufferCache;
     eviction?: FontEvictionPolicy;
@@ -70,8 +99,6 @@ export class FontLifecycleManager {
     // Tracks which callback type is pending ('idle' | 'timeout' | null) for proper cancellation
     #pendingType: 'idle' | 'timeout' | null = null;
 
-    readonly #PURGE_INTERVAL = 60000;
-
     // Reactive status map for Svelte components to track font states
     statuses = new SvelteMap<string, FontLoadStatus>();
 
@@ -85,7 +112,7 @@ export class FontLifecycleManager {
         this.#eviction = eviction;
         this.#queue = queue;
         if (typeof window !== 'undefined') {
-            this.#intervalId = setInterval(() => this.#purgeUnused(), this.#PURGE_INTERVAL);
+            this.#intervalId = setInterval(() => this.#purgeUnused(), PURGE_INTERVAL_MS);
         }
     }
 
@@ -147,11 +174,11 @@ export class FontLifecycleManager {
         if (typeof requestIdleCallback !== 'undefined') {
             this.#timeoutId = requestIdleCallback(
                 () => this.#processQueue(),
-                { timeout: 150 },
+                { timeout: IDLE_CALLBACK_TIMEOUT_MS },
             ) as unknown as ReturnType<typeof setTimeout>;
             this.#pendingType = 'idle';
         } else {
-            this.#timeoutId = setTimeout(() => this.#processQueue(), 16);
+            this.#timeoutId = setTimeout(() => this.#processQueue(), SCHEDULE_FALLBACK_MS);
             this.#pendingType = 'timeout';
         }
     }
@@ -183,7 +210,7 @@ export class FontLifecycleManager {
 
         // In data-saver mode, only load variable fonts and common weights (400, 700)
         if (this.#shouldDeferNonCritical()) {
-            entries = entries.filter(([, c]) => c.isVariable || [400, 700].includes(c.weight));
+            entries = entries.filter(([, c]) => c.isVariable || CRITICAL_FONT_WEIGHTS.includes(c.weight));
         }
 
         // Determine optimal concurrent fetches based on network speed (1-4)
@@ -198,7 +225,6 @@ export class FontLifecycleManager {
         // Parse buffers one at a time with periodic yields to avoid blocking UI
         const hasInputPending = !!(navigator as any).scheduling?.isInputPending;
         let lastYield = performance.now();
-        const YIELD_INTERVAL = 8;
 
         for (const [key, config] of entries) {
             const buffer = buffers.get(key);
@@ -214,7 +240,7 @@ export class FontLifecycleManager {
             // Others: yield every 8ms as fallback
             const shouldYield = hasInputPending
                 ? (navigator as any).scheduling.isInputPending({ includeContinuous: true })
-                : performance.now() - lastYield > YIELD_INTERVAL;
+                : performance.now() - lastYield > YIELD_INTERVAL_MS;
 
             if (shouldYield) {
                 await yieldToMainThread();
diff --git a/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts
index 2a64cc6..d49d296 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/utils/fontEvictionPolicy/FontEvictionPolicy.ts
@@ -1,6 +1,11 @@
+/**
+ * Default TTL after which an unpinned font is eligible for eviction.
+ */
+export const DEFAULT_FONT_TTL_MS = 5 * 60 * 1000;
+
 interface FontEvictionPolicyOptions {
     /**
-     * TTL in milliseconds. Defaults to 5 minutes.
+     * TTL in milliseconds. Defaults to {@link DEFAULT_FONT_TTL_MS}.
      */
     ttl?: number;
 }
@@ -17,7 +22,7 @@ export class FontEvictionPolicy {
 
     readonly #TTL: number;
 
-    constructor({ ttl = 5 * 60 * 1000 }: FontEvictionPolicyOptions = {}) {
+    constructor({ ttl = DEFAULT_FONT_TTL_MS }: FontEvictionPolicyOptions = {}) {
         this.#TTL = ttl;
     }
 
diff --git a/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts b/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts
index e921eb9..576b7f8 100644
--- a/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts
+++ b/src/entities/Font/model/store/fontLifecycleManager/utils/fontLoadQueue/FontLoadQueue.ts
@@ -1,5 +1,11 @@
 import type { FontLoadRequestConfig } from '../../../../types';
 
+/**
+ * Maximum number of times a single font key will be retried before it is
+ * considered permanently failed.
+ */
+export const FONT_LOAD_MAX_RETRIES = 3;
+
 /**
  * Manages the font load queue and per-font retry counts.
  *
@@ -10,8 +16,6 @@ export class FontLoadQueue {
     #queue = new Map<string, FontLoadRequestConfig>();
     #retryCounts = new Map<string, number>();
 
-    readonly #MAX_RETRIES = 3;
-
     /**
      * Adds a font to the queue.
      * @returns `true` if the key was newly enqueued, `false` if it was already present.
@@ -52,7 +56,7 @@ export class FontLoadQueue {
      * Returns `true` if the font has reached or exceeded the maximum retry limit.
      */
     isMaxRetriesReached(key: string): boolean {
-        return (this.#retryCounts.get(key) ?? 0) >= this.#MAX_RETRIES;
+        return (this.#retryCounts.get(key) ?? 0) >= FONT_LOAD_MAX_RETRIES;
     }
 
     /**
diff --git a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
index 0d8a73a..6136a63 100644
--- a/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
+++ b/src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
@@ -44,6 +44,13 @@ export type Side = 'A' | 'B';
 
 const STORAGE_KEY = 'glyphdiff:comparison';
 
+/**
+ * Max time the UI waits after a font-load failure before unblocking
+ * (#fontsReady = true). Acts as a safety net so a transient load error
+ * can't strand the comparison view in a permanent loading state.
+ */
+const FONT_READY_FALLBACK_MS = 1000;
+
 // Persistent storage for selected comparison fonts
 const storage = createPersistentStore<ComparisonState>(STORAGE_KEY, {
     fontAId: null,
@@ -236,7 +243,7 @@ export class ComparisonStore {
             this.#fontsReady = true;
         } catch (error) {
             console.warn('[ComparisonStore] Font loading failed:', error);
-            setTimeout(() => (this.#fontsReady = true), 1000);
+            setTimeout(() => (this.#fontsReady = true), FONT_READY_FALLBACK_MS);
         }
     }
 
-- 
2.52.0


From 0c59262a59e206cd8cec2de0793a8283bd96d39a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 21:13:46 +0300
Subject: [PATCH 18/29] =?UTF-8?q?refactor:=20extract=20magic=20constants?=
 =?UTF-8?q?=20=E2=80=94=20wave=204=20(UX=20timings=20+=20physics)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Name throttle/debounce intervals, spring presets, and layout paddings
that were inline numeric literals:

- VirtualList: VISIBLE_CHANGE_THROTTLE_MS (150), NEAR_BOTTOM_THROTTLE_MS
  (200), JUMP_THROTTLE_MS (200)
- SampleList: CHECK_POSITION_THROTTLE_MS (100)
- SliderArea: SLIDER_SPRING_CONFIG ({stiffness: 0.2, damping: 0.7}),
  SLIDER_PERSIST_DEBOUNCE_MS (100), SLIDER_PADDING_MOBILE_PX (48),
  SLIDER_PADDING_DESKTOP_PX (96)
- FontVirtualList: TOUCH_DEBOUNCE_MS (150)
- createPerspectiveManager: PERSPECTIVE_SPRING_CONFIG ({stiffness: 0.2,
  damping: 0.8})

No behavior changes — values preserved exactly.
---
 .../ui/FontVirtualList/FontVirtualList.svelte |  8 ++++-
 .../createPerspectiveManager.svelte.ts        | 11 ++++---
 src/shared/ui/VirtualList/VirtualList.svelte  | 22 ++++++++++++--
 .../ui/SliderArea/SliderArea.svelte           | 29 +++++++++++++++----
 .../ui/SampleList/SampleList.svelte           |  8 ++++-
 5 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
index 9cb6bed..957c86d 100644
--- a/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
+++ b/src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
@@ -83,9 +83,15 @@ async function handleJump(targetIndex: number) {
     }
 }
 
+/**
+ * Debounce wait before asking the font lifecycle manager to load fonts
+ * for the current visible window. Coalesces rapid scroll into one batch.
+ */
+const TOUCH_DEBOUNCE_MS = 150;
+
 const debouncedTouch = debounce((configs: FontLoadRequestConfig[]) => {
     fontLifecycleManager.touch(configs);
-}, 150);
+}, TOUCH_DEBOUNCE_MS);
 
 // Re-touch whenever visible set or weight changes — fixes weight-change gap
 $effect(() => {
diff --git a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
index 5c15c7a..4a55458 100644
--- a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
+++ b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
@@ -28,6 +28,12 @@
 
 import { Spring } from 'svelte/motion';
 
+/**
+ * Spring tuning for the perspective animation. Lower stiffness = slower
+ * easing into back/front state; higher damping = less overshoot.
+ */
+const PERSPECTIVE_SPRING_CONFIG = { stiffness: 0.2, damping: 0.8 } as const;
+
 /**
  * Configuration options for perspective effects
  */
@@ -93,10 +99,7 @@ export class PerspectiveManager {
      * Spring animation state
      * Animates between 0 (front) and 1 (back) with configurable physics
      */
-    spring = new Spring(0, {
-        stiffness: 0.2,
-        damping: 0.8,
-    });
+    spring = new Spring(0, PERSPECTIVE_SPRING_CONFIG);
 
     /**
      * Reactive state: true when in back position
diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index c4af3d1..0bba6f3 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -167,17 +167,33 @@ $effect(() => {
     }
 });
 
+/**
+ * Throttle for visible-items change callbacks. Lower = more responsive
+ * downstream UI; higher = fewer recomputes during scroll.
+ */
+const VISIBLE_CHANGE_THROTTLE_MS = 150;
+
+/**
+ * Throttle for near-bottom callbacks (typically used to prefetch next page).
+ */
+const NEAR_BOTTOM_THROTTLE_MS = 200;
+
+/**
+ * Throttle for jump callbacks (programmatic scroll-to-index).
+ */
+const JUMP_THROTTLE_MS = 200;
+
 const throttledVisibleChange = throttle((visibleItems: T[]) => {
     onVisibleItemsChange?.(visibleItems);
-}, 150); // 150ms throttle
+}, VISIBLE_CHANGE_THROTTLE_MS);
 
 const throttledNearBottom = throttle((lastVisibleIndex: number) => {
     onNearBottom?.(lastVisibleIndex);
-}, 200); // 200ms throttle
+}, NEAR_BOTTOM_THROTTLE_MS);
 
 const throttledOnJump = throttle((targetIndex: number) => {
     onJump?.(targetIndex);
-}, 200);
+}, JUMP_THROTTLE_MS);
 
 // Calculate top/bottom padding for spacer elements
 // In CSS Grid, gap creates space BETWEEN elements.
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 59142e8..555a77c 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -50,6 +50,26 @@ interface Props {
 
 let { isSidebarOpen = false, class: className }: Props = $props();
 
+/**
+ * Spring tuning for the comparison slider thumb. Lower stiffness = slower
+ * follow; higher damping = less overshoot.
+ */
+const SLIDER_SPRING_CONFIG = { stiffness: 0.2, damping: 0.7 } as const;
+
+/**
+ * Debounce wait before persisting the slider position to the store.
+ * High frequency during drag → batched writes.
+ */
+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;
+
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
@@ -89,10 +109,7 @@ $effect(() => {
     return () => observer.disconnect();
 });
 
-const sliderSpring = new Spring(50, {
-    stiffness: 0.2,
-    damping: 0.7,
-});
+const sliderSpring = new Spring(50, SLIDER_SPRING_CONFIG);
 const sliderPos = $derived(sliderSpring.current);
 
 function handleMove(e: PointerEvent) {
@@ -115,7 +132,7 @@ function startDragging(e: PointerEvent) {
 
 const storeSliderPosition = debounce((value: number) => {
     comparisonStore.sliderPosition = value;
-}, 100);
+}, SLIDER_PERSIST_DEBOUNCE_MS);
 
 $effect(() => {
     storeSliderPosition(sliderPos);
@@ -172,7 +189,7 @@ $effect(() => {
     const fontAStr = getPretextFontString(_weight, _size, fontA.name);
     const fontBStr = getPretextFontString(_weight, _size, fontB.name);
 
-    const padding = _isMobile ? 48 : 96;
+    const padding = _isMobile ? SLIDER_PADDING_MOBILE_PX : SLIDER_PADDING_DESKTOP_PX;
     const availableWidth = Math.max(0, _width - padding);
     const lineHeight = _size * _height;
 
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 48b8076..09d5258 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -36,6 +36,12 @@ const SAMPLER_CONTENT_PADDING_X = 32;
 // Matches the previous hardcoded itemHeight={220} value to avoid regressions.
 const SAMPLER_FALLBACK_HEIGHT = 220;
 
+/**
+ * Throttle for the `checkPosition` scroll observer. Trades responsiveness
+ * of the perspective tilt against scroll-handler cost.
+ */
+const CHECK_POSITION_THROTTLE_MS = 100;
+
 let text = $state('The quick brown fox jumps over the lazy dog...');
 let wrapper = $state<HTMLDivElement | null>(null);
 // Binds to the actual window height
@@ -54,7 +60,7 @@ const checkPosition = throttle(() => {
     const viewportMiddle = innerHeight / 2;
 
     isAboveMiddle = rect.top < viewportMiddle;
-}, 100);
+}, CHECK_POSITION_THROTTLE_MS);
 
 // Resolver recreated when typography values change. The returned closure reads
 // fontLifecycleManager.statuses (a SvelteMap) on every call, so any font status
-- 
2.52.0


From 06b6274e66127d049de754748881fd30432cc9d7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 24 May 2026 22:07:44 +0300
Subject: [PATCH 19/29] =?UTF-8?q?refactor:=20extract=20magic=20constants?=
 =?UTF-8?q?=20=E2=80=94=20wave=205=20(single-site=20thresholds)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Long-tail cleanup: threshold and default-value literals in shared
helpers get named module-level constants.

- CharacterComparisonEngine: CHAR_PROXIMITY_RANGE_PCT (5),
  DEFAULT_RENDER_SIZE_PX (16) — kept local instead of importing
  DEFAULT_FONT_SIZE from \$entities/Font because \$shared/lib cannot
  legally upward-import from \$entities per FSD (also avoids an init
  cycle through the mocks barrel).
- typographySettingsStore: BASE_SIZE_EPSILON (0.01) — rounding-jitter
  guard for baseSize reconciliation.
- createDebouncedState: DEFAULT_DEBOUNCE_MS (300) — exported so callers
  can mirror the default.
- createVirtualizer: MEASUREMENT_EPSILON_PX (0.5) — minimum height
  delta before committing a re-measured row.
- createPerspectiveManager: PERSPECTIVE_TOGGLE_THRESHOLD (0.5) — the
  halfway point on the 0-1 spring that flips isBack/isFront.

Skipped #19 (PerspectivePlan defaults) per review — marginal gain.
---
 .../typographySettingsStore.svelte.ts         | 10 +++++++++-
 .../CharacterComparisonEngine.svelte.ts       | 19 +++++++++++++++++--
 .../createDebouncedState.svelte.ts            |  8 +++++++-
 .../createPerspectiveManager.svelte.ts        | 11 +++++++++--
 .../createVirtualizer.svelte.ts               | 10 ++++++++--
 5 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
index 5df2a8b..58eabd9 100644
--- a/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
+++ b/src/features/AdjustTypography/model/store/typographySettingsStore/typographySettingsStore.svelte.ts
@@ -28,6 +28,14 @@ import {
 } from '$shared/lib';
 import { SvelteMap } from 'svelte/reactivity';
 
+/**
+ * Epsilon for detecting "significant" base-size changes when reconciling
+ * the multiplier-derived display value back to the underlying baseSize.
+ * Differences below this threshold are treated as rounding jitter and
+ * skipped to avoid spurious storage writes.
+ */
+const BASE_SIZE_EPSILON = 0.01;
+
 type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, keyof ControlDataModel>;
 
 /**
@@ -139,7 +147,7 @@ export class TypographySettingsStore {
                 const calculatedBase = currentDisplayValue / this.#multiplier;
 
                 // Only update if the difference is significant (prevents rounding jitter)
-                if (Math.abs(this.#baseSize - calculatedBase) > 0.01) {
+                if (Math.abs(this.#baseSize - calculatedBase) > BASE_SIZE_EPSILON) {
                     this.#baseSize = calculatedBase;
                 }
             });
diff --git a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts b/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
index c61d58c..1816218 100644
--- a/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
+++ b/src/shared/lib/helpers/CharacterComparisonEngine/CharacterComparisonEngine.svelte.ts
@@ -4,6 +4,20 @@ import {
     prepareWithSegments,
 } from '@chenglou/pretext';
 
+/**
+ * Width of the character morph "halo" around the slider thumb, in percent
+ * of container width. Characters within this window get partial blending
+ * instead of a hard A→B flip.
+ */
+const CHAR_PROXIMITY_RANGE_PCT = 5;
+
+/**
+ * Default render size in px when callers omit the `size` arg on `layout()`.
+ * Kept as a local constant to avoid pulling `$entities/Font` into
+ * `$shared/lib` (would create an FSD-illegal upward import cycle).
+ */
+const DEFAULT_RENDER_SIZE_PX = 16;
+
 /**
  * A single laid-out line produced by dual-font comparison layout.
  *
@@ -129,7 +143,7 @@ export class CharacterComparisonEngine {
         width: number,
         lineHeight: number,
         spacing: number = 0,
-        size: number = 16,
+        size: number = DEFAULT_RENDER_SIZE_PX,
     ): ComparisonResult {
         if (!text) {
             return { lines: [], totalHeight: 0 };
@@ -260,7 +274,7 @@ export class CharacterComparisonEngine {
         const chars = line.chars;
         const n = chars.length;
         const sliderX = (sliderPos / 100) * containerWidth;
-        const range = 5;
+        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
@@ -291,6 +305,7 @@ export class CharacterComparisonEngine {
         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;
diff --git a/src/shared/lib/helpers/createDebouncedState/createDebouncedState.svelte.ts b/src/shared/lib/helpers/createDebouncedState/createDebouncedState.svelte.ts
index 7115d31..79ead26 100644
--- a/src/shared/lib/helpers/createDebouncedState/createDebouncedState.svelte.ts
+++ b/src/shared/lib/helpers/createDebouncedState/createDebouncedState.svelte.ts
@@ -1,5 +1,11 @@
 import { debounce } from '$shared/lib/utils';
 
+/**
+ * Default debounce delay used when no wait is provided. Picked to feel
+ * snappy for typing while still coalescing API-bound side effects.
+ */
+export const DEFAULT_DEBOUNCE_MS = 300;
+
 /**
  * Creates reactive state with immediate and debounced values.
  *
@@ -23,7 +29,7 @@ import { debounce } from '$shared/lib/utils';
  * <p>Searching: {search.debounced}</p>
  * ```
  */
-export function createDebouncedState<T>(initialValue: T, wait: number = 300) {
+export function createDebouncedState<T>(initialValue: T, wait: number = DEFAULT_DEBOUNCE_MS) {
     let immediate = $state(initialValue);
     let debounced = $state(initialValue);
 
diff --git a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
index 4a55458..f18b9a8 100644
--- a/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
+++ b/src/shared/lib/helpers/createPerspectiveManager/createPerspectiveManager.svelte.ts
@@ -34,6 +34,13 @@ import { Spring } from 'svelte/motion';
  */
 const PERSPECTIVE_SPRING_CONFIG = { stiffness: 0.2, damping: 0.8 } as const;
 
+/**
+ * Halfway threshold on the 0→1 spring value. Above flips `isBack`,
+ * below flips `isFront`. Picking 0.5 means both states flip at the
+ * exact midpoint of the animation.
+ */
+const PERSPECTIVE_TOGGLE_THRESHOLD = 0.5;
+
 /**
  * Configuration options for perspective effects
  */
@@ -107,7 +114,7 @@ export class PerspectiveManager {
      * Content should appear blurred, scaled down, and less interactive
      * when this is true. Derived from spring value > 0.5.
      */
-    isBack = $derived(this.spring.current > 0.5);
+    isBack = $derived(this.spring.current > PERSPECTIVE_TOGGLE_THRESHOLD);
 
     /**
      * Reactive state: true when in front position
@@ -115,7 +122,7 @@ export class PerspectiveManager {
      * Content should be fully visible, sharp, and interactive
      * when this is true. Derived from spring value < 0.5.
      */
-    isFront = $derived(this.spring.current < 0.5);
+    isFront = $derived(this.spring.current < PERSPECTIVE_TOGGLE_THRESHOLD);
 
     /**
      * Internal configuration with defaults applied
diff --git a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
index e4051cd..949d991 100644
--- a/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
+++ b/src/shared/lib/helpers/createVirtualizer/createVirtualizer.svelte.ts
@@ -4,6 +4,12 @@
  * Used to render visible items with absolute positioning based on computed offsets.
  */
 
+/**
+ * Minimum height delta (in px) required to commit a re-measured row height.
+ * Sub-pixel diffs are treated as measurement noise to avoid spurious re-flows.
+ */
+const MEASUREMENT_EPSILON_PX = 0.5;
+
 export interface VirtualItem {
     /**
      * Index of the item in the data array
@@ -381,8 +387,8 @@ export function createVirtualizer<T>(
                     if (!isNaN(index)) {
                         const oldHeight = measuredSizes[index];
 
-                        // Only update if the height difference is significant (> 0.5px)
-                        if (oldHeight === undefined || Math.abs(oldHeight - height) > 0.5) {
+                        // Only update if the height difference is significant
+                        if (oldHeight === undefined || Math.abs(oldHeight - height) > MEASUREMENT_EPSILON_PX) {
                             measurementBuffer[index] = height;
                         }
                     }
-- 
2.52.0


From 4e7f76ecb1a62c24b80eba87c4f0543baa2592c3 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:19:45 +0300
Subject: [PATCH 20/29] feat(styles): add shadow + motion tokens, surface
 utilities, mode-switching color vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Establish a real design system foundation by moving the project from
inline arbitrary-value classes to named tokens and reusable utilities.

Tokens added to @theme (auto-generate Tailwind utilities):
- Shadows: shadow-rest, shadow-stamp-{rest,hover,pressed,card},
  shadow-popover, shadow-floating-panel{,-dark}, shadow-overlay
- Motion: duration-{fast,normal,slow,slower};
  ease-{standard,out-soft,spring-overshoot}

Semantic mode-switching colors added to :root / .dark so utilities
auto-adapt without dark: variants:
- --color-border-subtle, --color-text-subtle, --color-skeleton

Utilities migrated to Tailwind v4's @utility directive with direct CSS
properties (previously @layer utilities with @apply chains, which
silently failed when chaining to other user-defined utilities):
- border-subtle, text-subtle, focus-ring
- surface-canvas, surface-card, surface-card-elevated, surface-popover,
  surface-floating
- flex-center, skeleton-fill, text-label-mono

Notes:
- text-secondary was renamed to text-subtle because --color-secondary is
  registered in @theme (a near-white shadcn surface token), which made
  Tailwind v4 auto-generate a colliding text-secondary utility that won
  over the user-defined one — every consumer effectively rendered as
  near-white text. The text-subtle name pairs cleanly with border-subtle
  and avoids any @theme collisions.
- Dead --space-* variable scale removed (was defined but never wired
  into @theme; Tailwind's default spacing scale is used everywhere).
---
 src/app/styles/app.css | 155 +++++++++++++++++++++++++++++++++++------
 1 file changed, 133 insertions(+), 22 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index b00d02a..9febc0a 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -14,6 +14,12 @@
   --swiss-black: #1a1a1a;
   --swiss-white: #ffffff;
 
+  /* Semantic mode-switching colors. These are redefined inside `.dark`
+     so utilities that reference them auto-adapt without a `dark:` variant. */
+  --color-border-subtle: rgb(0 0 0 / 0.05);
+  --color-text-subtle: var(--neutral-500);
+  --color-skeleton: var(--neutral-200);
+
   /* Neutral Grays */
   --neutral-50: #fafafa;
   --neutral-100: #f5f5f5;
@@ -80,16 +86,6 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 
-  /* Spacing Scale (rem-based) */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 0.75rem;
-  --space-lg: 1rem;
-  --space-xl: 1.5rem;
-  --space-2xl: 2rem;
-  --space-3xl: 3rem;
-  --space-4xl: 4rem;
-
   /* Typography Scale */
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
@@ -114,6 +110,11 @@
   --color-surface: var(--dark-bg);
   --color-paper: var(--dark-card);
 
+  /* Dark-mode overrides for the semantic mode-switching colors. */
+  --color-border-subtle: rgb(255 255 255 / 0.1);
+  --color-text-subtle: var(--neutral-400);
+  --color-skeleton: var(--neutral-800);
+
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.145 0 0);
@@ -212,6 +213,51 @@
   --text-2xs: 0.625rem;
   /* Monospace label tracking — used in Loader and Footnote */
   --tracking-wider-mono: 0.2em;
+
+  /* ============================================
+     SHADOW TOKENS
+     ============================================ */
+
+  /* Default resting shadow — equivalent to Tailwind's shadow-sm. Used on
+     buttons, sliders, popover triggers in non-floating state. */
+  --shadow-rest: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  /* Swiss "hard offset" stamp — rests at 2px/2px, lifts to 3px/3px on
+     hover, presses back to 1px/1px on active. Primary button motif. */
+  --shadow-stamp-rest: 0.125rem 0.125rem 0 0 rgb(0 0 0 / 0.1);
+  --shadow-stamp-hover: 0.1875rem 0.1875rem 0 0 rgb(0 0 0 / 0.15);
+  --shadow-stamp-pressed: 0.0625rem 0.0625rem 0 0 rgb(0 0 0 / 0.1);
+
+  /* Card-tier hard-offset stamp — wider, brand-tinted. Used on
+     interactive cards (FontSampler hover). */
+  --shadow-stamp-card: 5px 5px 0 0 var(--color-brand);
+
+  /* Floating popovers (typography menu, combo control list). */
+  --shadow-popover: 0 20px 40px -10px rgb(0 0 0 / 0.15);
+
+  /* Drop-shadow under semi-translucent floating panels like the
+     comparison slider's character row. */
+  --shadow-floating-panel: 0 25px 50px -12px rgb(0 0 0 / 0.05);
+  --shadow-floating-panel-dark: 0 25px 50px -12px rgb(0 0 0 / 0.2);
+
+  /* Drawer / overlay shadow — full-strength shadow-2xl. */
+  --shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* ============================================
+     MOTION TOKENS
+     ============================================ */
+
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  /* Tailwind's default ease-in-out — symmetric, good for layout shifts. */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  /* Decelerating curve — matches Tailwind's ease-out. Dominant in this codebase. */
+  --ease-out-soft: cubic-bezier(0, 0, 0.2, 1);
+  /* Spring overshoot — used in character pop animation. */
+  --ease-spring-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 @layer base {
@@ -277,21 +323,86 @@
   }
 }
 
-@layer utilities {
-  /* 21× border-black/5 dark:border-white/10 → single token */
-  .border-subtle {
-    @apply border-black/5 dark:border-white/10;
-  }
-  /* Secondary text pair */
-  .text-secondary {
-    @apply text-neutral-500 dark:text-neutral-400;
-  }
-  /* Standard focus ring */
-  .focus-ring {
-    @apply focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2;
+/* ============================================
+   DESIGN-SYSTEM UTILITIES
+   ============================================
+   Defined via `@utility` (Tailwind v4) so they integrate with the variant
+   system (`hover:`, `dark:`, breakpoints) and don't rely on `@apply`
+   chains. Colors reference the mode-switching semantic vars defined in
+   `:root`/`.dark` above, so most utilities need no `dark:` variant in
+   their definition or at call sites. */
+
+@utility border-subtle {
+  border-color: var(--color-border-subtle);
+}
+
+/* Muted text color — paired with `border-subtle` naming. The previous
+   name `text-secondary` collided with Tailwind v4 auto-generating a
+   utility from `--color-secondary` (the shadcn near-white surface token
+   registered in `@theme`), which made every consumer effectively
+   invisible (near-white text on light backgrounds). */
+@utility text-subtle {
+  color: var(--color-text-subtle);
+}
+
+@utility focus-ring {
+  &:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 2px var(--color-background, white), 0 0 0 4px var(--color-brand);
   }
 }
 
+/* ── Surface utilities ────────────────────────────────────────── */
+
+@utility surface-canvas {
+  background-color: var(--color-surface);
+}
+
+@utility surface-card {
+  background-color: var(--color-paper);
+  border: 1px solid var(--color-border-subtle);
+}
+
+@utility surface-card-elevated {
+  background-color: var(--color-paper);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-rest);
+}
+
+@utility surface-popover {
+  background-color: var(--color-paper);
+  border: 1px solid var(--color-border-subtle);
+  box-shadow: var(--shadow-popover);
+}
+
+@utility surface-floating {
+  background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--color-border-subtle);
+}
+
+/* ── Shape / layout ───────────────────────────────────────────── */
+
+@utility flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@utility skeleton-fill {
+  background-color: color-mix(in srgb, var(--color-skeleton) 70%, transparent);
+}
+
+/* ── Typography ───────────────────────────────────────────────── */
+
+@utility text-label-mono {
+  font-family: var(--font-primary);
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  text-transform: uppercase;
+}
+
 /* Global utility - useful across your app */
 @media (prefers-reduced-motion: reduce) {
     * {
-- 
2.52.0


From 15bb961ccc6704242c424db3c874635bbcd929a1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:19:56 +0300
Subject: [PATCH 21/29] refactor(Button): add block-list-row layout variant +
 adopt design-system tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New layout prop with values 'inline' (default) and 'block-list-row'.
  The block-list-row variant bakes in full-width, left-aligned content
  with trailing icon and text-sm, replacing the ~10-class override
  duplicated across FilterGroup, FontList, and similar list-row sites.
- primary variant's three hard-offset shadows now reference the
  shadow-stamp-{rest,hover,pressed} tokens; the 0.0625rem translate
  becomes translate-{x,y}-px.
- Base classes use text-label-mono and duration-normal utilities
  instead of inline 'font-primary font-bold tracking-tight uppercase'
  and 'duration-200'.
- The icon variant's background uses surface-canvas (semantic naming;
  picks up dark-mode automatically via --color-surface).
- text-secondary → text-subtle (avoids collision with the @theme
  --color-secondary token; see earlier styles commit).

New exported type: ButtonLayout.
---
 src/shared/ui/Button/Button.svelte | 37 ++++++++++++++++++++++--------
 src/shared/ui/Button/types.ts      |  1 +
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
index e2b51aa..d533cd2 100644
--- a/src/shared/ui/Button/Button.svelte
+++ b/src/shared/ui/Button/Button.svelte
@@ -7,6 +7,7 @@ import { cn } from '$shared/lib';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type {
+    ButtonLayout,
     ButtonSize,
     ButtonVariant,
     IconPosition,
@@ -23,6 +24,14 @@ interface Props extends HTMLButtonAttributes {
      * @default 'md'
      */
     size?: ButtonSize;
+    /**
+     * Layout shape
+     * - `inline`: default — content-sized, centered.
+     * - `block-list-row`: full-width row with the content left-aligned and any
+     *   trailing icon pushed to the right (used for filter-group rows, etc).
+     * @default 'inline'
+     */
+    layout?: ButtonLayout;
     /**
      * Icon snippet
      */
@@ -56,6 +65,7 @@ interface Props extends HTMLButtonAttributes {
 let {
     variant = 'secondary',
     size = 'md',
+    layout = 'inline',
     icon,
     iconPosition = 'left',
     active = false,
@@ -76,10 +86,10 @@ const variantStyles: Record<ButtonVariant, string> = {
         'hover:bg-swiss-red/90',
         'active:bg-swiss-red/80',
         'border border-swiss-red',
-        'shadow-[0.125rem_0.125rem_0_0_rgba(0,0,0,0.1)]',
-        'hover:shadow-[0.1875rem_0.1875rem_0_0_rgba(0,0,0,0.15)]',
-        'active:shadow-[0.0625rem_0.0625rem_0_0_rgba(0,0,0,0.08)]',
-        'active:translate-x-[0.0625rem] active:translate-y-[0.0625rem]',
+        'shadow-stamp-rest',
+        'hover:shadow-stamp-hover',
+        'active:shadow-stamp-pressed',
+        'active:translate-x-px active:translate-y-px',
         'disabled:bg-neutral-300 dark:disabled:bg-neutral-700',
         'disabled:text-neutral-500 dark:disabled:text-neutral-500',
         'disabled:border-neutral-300 dark:disabled:border-neutral-700',
@@ -111,7 +121,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     ),
     ghost: cn(
         'bg-transparent',
-        'text-secondary',
+        'text-subtle',
         'border border-transparent',
         'hover:bg-transparent dark:hover:bg-transparent',
         'hover:text-brand dark:hover:text-brand',
@@ -120,8 +130,8 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:cursor-not-allowed',
     ),
     icon: cn(
-        'bg-surface dark:bg-dark-bg',
-        'text-secondary',
+        'surface-canvas',
+        'text-subtle',
         'border border-transparent',
         'hover:bg-paper dark:hover:bg-paper',
         'hover:text-brand',
@@ -174,12 +184,19 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
     icon: 'bg-paper dark:bg-paper text-brand border-subtle',
 };
 
+const layoutStyles: Record<ButtonLayout, string> = {
+    inline: '',
+    /* List-row buttons act as content labels rather than action buttons,
+       so they bump to `text-sm` regardless of the size prop's default. */
+    'block-list-row': 'w-full justify-between text-left text-sm',
+};
+
 const classes = $derived(cn(
     // Base
     'inline-flex items-center justify-center',
-    'font-primary font-bold tracking-tight uppercase',
+    'text-label-mono',
     'rounded-none',
-    'transition-all duration-200',
+    'transition-all duration-normal',
     'select-none',
     'outline-none',
     'cursor-pointer',
@@ -190,6 +207,8 @@ const classes = $derived(cn(
     variantStyles[variant],
     // Size (square when icon-only)
     isIconOnly ? iconSizeStyles[size] : sizeStyles[size],
+    // Layout
+    layoutStyles[layout],
     // Animate (CSS tap scale — excluded for primary which uses translate instead)
     animate && !disabled && variant !== 'primary' && 'active:scale-[0.97]',
     // Active override
diff --git a/src/shared/ui/Button/types.ts b/src/shared/ui/Button/types.ts
index 2d42e35..e1e6f5f 100644
--- a/src/shared/ui/Button/types.ts
+++ b/src/shared/ui/Button/types.ts
@@ -1,3 +1,4 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' | 'icon';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonLayout = 'inline' | 'block-list-row';
 export type IconPosition = 'left' | 'right';
-- 
2.52.0


From 5b7ec03973ad1eba5a338bbafbebb45a4425be7b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:20:40 +0300
Subject: [PATCH 22/29] refactor: sweep call sites onto design-system utilities
 + bug fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace inline class clusters with the design-system utilities and
tokens established in the prior two commits. No behavior changes
intended beyond two real bug fixes.

Bug fixes:
- SampleList.svelte: 'border-border-subtle bg-background-40' was a
  silent no-op (both classes mis-spelled). Now 'border-subtle
  bg-background/40' applies as intended.
- FontList.svelte: 'h-[44px]' → 'h-11' (44px = 2.75rem = spacing-11,
  no need for arbitrary value).

Sweeps:
- TypographyMenu: popover + floating bar now use surface-popover /
  surface-floating + shadow-popover.
- FontList + FilterGroup: tertiary list buttons use the new
  Button layout="block-list-row" variant; skeleton fills use
  the skeleton-fill utility.
- Footer / BreadcrumbHeader: surface-floating absorbs the
  bg-surface/blur/border cluster. Footer bumped to z-20 with a
  comment explaining the stacking against SidebarContainer (z-40/50).
- FontSampler: surface-card + hover shadow-stamp-card token.
- SliderArea: surface-canvas, flex-center, shadow-floating-panel
  tokens (light + dark variants).
- Sidebar / Header / ButtonGroup / Layout / SidebarContainer:
  bg-surface dark:bg-dark-bg → surface-canvas (8 sites);
  SidebarContainer mobile panel uses shadow-overlay.
- Loader / Thumb: flex items-center justify-center → flex-center;
  Thumb durations → duration-fast.
- ComboControl: trigger uses surface-card-elevated when open,
  popover uses surface-card-elevated, label cluster → text-label-mono,
  flex-center for the trigger interior.
- Slider: shadow-sm → shadow-rest, duration-150 → duration-fast.
- text-secondary → text-subtle across Input, Slider, ComboControl
  (matches the rename in the styles commit).
- Link: reverted earlier surface-floating attempt — Link's original
  bg-surface/80 backdrop-blur pattern was thinner than surface-floating
  (no border, smaller blur), and the Footer was overlaying its own
  border-subtle on top, fighting the utility. Kept the original style.
---
 src/app/ui/Layout.svelte                         |  2 +-
 .../ui/BreadcrumbHeader/BreadcrumbHeader.svelte  |  4 ++--
 .../ui/TypographyMenu/TypographyMenu.svelte      | 16 ++++++----------
 .../ui/FontSampler/FontSampler.svelte            |  8 +++-----
 src/shared/ui/Button/ButtonGroup.svelte          |  2 +-
 src/shared/ui/ComboControl/ComboControl.svelte   | 12 ++++++------
 src/shared/ui/FilterGroup/FilterGroup.svelte     |  4 ++--
 src/shared/ui/Input/Input.svelte                 |  2 +-
 src/shared/ui/Loader/Loader.svelte               |  2 +-
 .../ui/SidebarContainer/SidebarContainer.svelte  |  7 +++----
 src/shared/ui/Slider/Slider.svelte               |  6 +++---
 .../ComparisonView/ui/FontList/FontList.svelte   | 13 +++++++------
 .../ComparisonView/ui/Header/Header.svelte       |  2 +-
 .../ComparisonView/ui/Sidebar/Sidebar.svelte     |  8 ++++----
 .../ui/SliderArea/SliderArea.svelte              |  8 ++++----
 src/widgets/ComparisonView/ui/Thumb/Thumb.svelte |  8 ++++----
 src/widgets/Footer/ui/Footer/Footer.svelte       |  8 ++++++--
 .../SampleList/ui/SampleList/SampleList.svelte   |  2 +-
 18 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/src/app/ui/Layout.svelte b/src/app/ui/Layout.svelte
index bee32cc..42a85c7 100644
--- a/src/app/ui/Layout.svelte
+++ b/src/app/ui/Layout.svelte
@@ -74,7 +74,7 @@ onDestroy(() => themeManager.destroy());
     <div
         id="app-root"
         class={cn(
-            'min-h-dvh w-auto flex flex-col bg-surface dark:bg-dark-bg relative',
+            'min-h-dvh w-auto flex flex-col surface-canvas relative',
             theme === 'dark' ? 'dark' : '',
         )}
     >
diff --git a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
index f419995..e48dcf9 100644
--- a/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
+++ b/src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
@@ -43,8 +43,8 @@ function createButtonText(item: BreadcrumbItem) {
             md:h-16 px-4 md:px-6 lg:px-8
             flex items-center justify-between
             z-40
-            bg-surface/90 dark:bg-dark-bg/90 backdrop-blur-md
-            border-b border-subtle
+            surface-floating bg-surface/90 dark:bg-dark-bg/90
+            border-x-0 border-t-0
         "
     >
         <div class="max-w-8xl px-4 sm:px-6 h-full w-full flex items-center justify-between gap-2 sm:gap-4">
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index 1376cf1..e434ec4 100644
--- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
@@ -90,11 +90,8 @@ $effect(() => {
                         align="end"
                         sideOffset={8}
                         class={cn(
-                            'z-50 w-72',
-                            'bg-surface dark:bg-dark-card',
-                            'border border-subtle',
-                            'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
-                            'rounded-none p-4',
+                            'z-50 w-72 p-4 rounded-none',
+                            'surface-popover',
                             'data-[state=open]:animate-in data-[state=closed]:animate-out',
                             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
                             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
@@ -118,7 +115,7 @@ $effect(() => {
                                 {#snippet child({ props })}
                                     <button
                                         {...props}
-                                        class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+                                        class="flex-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
                                         aria-label="Close controls"
                                     >
                                         <XIcon class="size-3.5 text-neutral-500" />
@@ -150,10 +147,9 @@ $effect(() => {
             <div
                 class={cn(
                     'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
-                    'bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
-                    'border border-subtle',
-                    'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
-                    'rounded-none ring-1 ring-black/5 dark:ring-white/5',
+                    'surface-floating bg-surface/95 dark:bg-dark-bg/95 backdrop-blur-xl',
+                    'shadow-popover rounded-none',
+                    'ring-1 ring-black/5 dark:ring-white/5',
                 )}
             >
                 <!-- Header: icon + label -->
diff --git a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
index 7b362a4..614301b 100644
--- a/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
+++ b/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
@@ -58,12 +58,10 @@ const stats = $derived([
     class="
         group relative
         w-full h-full
-        bg-paper dark:bg-dark-card
-        border border-subtle
+        surface-card
         hover:border-brand dark:hover:border-brand
-        hover:shadow-brand/10
-        hover:shadow-[5px_5px_0px_0px]
-        transition-all duration-200
+        hover:shadow-stamp-card
+        transition-all duration-normal
         overflow-hidden
         flex flex-col
         min-h-60
diff --git a/src/shared/ui/Button/ButtonGroup.svelte b/src/shared/ui/Button/ButtonGroup.svelte
index 1f56489..4ab7dc3 100644
--- a/src/shared/ui/Button/ButtonGroup.svelte
+++ b/src/shared/ui/Button/ButtonGroup.svelte
@@ -25,7 +25,7 @@ let { children, class: className, ...rest }: Props = $props();
 <div
     class={cn(
         'flex items-center gap-1 p-1',
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
         'border border-subtle',
         'rounded-none',
         'transition-colors duration-500',
diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 0dffe98..778274e 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -91,7 +91,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
             step={control.step}
             orientation="horizontal"
         />
-        <span class="font-mono text-xs text-secondary tabular-nums w-10 text-right shrink-0">
+        <span class="font-mono text-xs text-subtle tabular-nums w-10 text-right shrink-0">
             {formattedValue()}
         </span>
     </div>
@@ -120,12 +120,12 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                         <button
                             {...props}
                             class={cn(
-                                'flex flex-col items-center justify-center w-14 py-1',
-                                'select-none rounded-none transition-all duration-150',
+                                'flex flex-col flex-center w-14 py-1',
+                                'select-none rounded-none transition-all duration-fast',
                                 'border border-transparent',
                                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
                                 open
-                                    ? 'bg-paper dark:bg-dark-card shadow-sm border-subtle'
+                                    ? 'surface-card-elevated'
                                     : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
                             aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
@@ -134,7 +134,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                             {#if displayLabel}
                                 <span
                                     class="
-                                        text-3xs font-primary font-bold tracking-tight uppercase
+                                        text-3xs text-label-mono
                                         text-neutral-900 dark:text-neutral-100
                                         mb-0.5 leading-none
                                     "
@@ -153,7 +153,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
                 <!-- Vertical slider popover -->
                 <Popover.Content
-                    class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
+                    class="w-auto py-4 px-3 h-64 flex-center rounded-none surface-card-elevated"
                     align="center"
                     side="top"
                 >
diff --git a/src/shared/ui/FilterGroup/FilterGroup.svelte b/src/shared/ui/FilterGroup/FilterGroup.svelte
index 917c465..acc9a41 100644
--- a/src/shared/ui/FilterGroup/FilterGroup.svelte
+++ b/src/shared/ui/FilterGroup/FilterGroup.svelte
@@ -83,9 +83,9 @@ $effect(() => {
             <div transition:fly={{ y: 20, duration: 200, easing: cubicOut }}>
                 <Button
                     variant="tertiary"
+                    layout="block-list-row"
                     active={property.selected}
                     onclick={() => (property.selected = !property.selected)}
-                    class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
                     iconPosition="right"
                     icon={property.selected ? icon : undefined}
                 >
@@ -96,8 +96,8 @@ $effect(() => {
         {#if hasMore}
             <Button
                 variant="icon"
+                layout="block-list-row"
                 onclick={() => (showMore = !showMore)}
-                class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
                 iconPosition="left"
             >
                 {#snippet icon()}
diff --git a/src/shared/ui/Input/Input.svelte b/src/shared/ui/Input/Input.svelte
index 65745e7..363bd98 100644
--- a/src/shared/ui/Input/Input.svelte
+++ b/src/shared/ui/Input/Input.svelte
@@ -149,7 +149,7 @@ const inputClasses = $derived(cn(
         <span
             class={cn(
                 'text-2xs font-mono tracking-wide px-1',
-                error ? 'text-brand ' : 'text-secondary',
+                error ? 'text-brand ' : 'text-subtle',
             )}
         >
             {helperText}
diff --git a/src/shared/ui/Loader/Loader.svelte b/src/shared/ui/Loader/Loader.svelte
index 86b8840..9694e82 100644
--- a/src/shared/ui/Loader/Loader.svelte
+++ b/src/shared/ui/Loader/Loader.svelte
@@ -26,7 +26,7 @@ let { size = 20, class: className = '', message = 'analyzing_data' }: Props = $p
 </script>
 
 <div
-    class="absolute inset-x-0 inset-y-0 flex items-center justify-center gap-4 {className}"
+    class="absolute inset-x-0 inset-y-0 flex-center gap-4 {className}"
     in:fade={{ duration: 300 }}
     out:fade={{ duration: 300 }}
 >
diff --git a/src/shared/ui/SidebarContainer/SidebarContainer.svelte b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
index 3bfb2ec..57108c9 100644
--- a/src/shared/ui/SidebarContainer/SidebarContainer.svelte
+++ b/src/shared/ui/SidebarContainer/SidebarContainer.svelte
@@ -59,7 +59,7 @@ function close() {
 
         <!-- Panel -->
         <div
-            class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-2xl"
+            class="fixed left-0 top-0 bottom-0 w-80 z-50 shadow-overlay"
             in:fly={{ x: -320, duration: 300, easing: cubicOut }}
             out:fly={{ x: -320, duration: 250, easing: cubicOut }}
         >
@@ -83,11 +83,10 @@ function close() {
             'shrink-0 z-30 h-full relative',
             'overflow-hidden',
             'will-change-[width]',
-            'transition-[width] duration-300 ease-out',
             'border-r border-subtle',
-            'bg-surface dark:bg-dark-bg',
+            'surface-canvas',
             isOpen ? 'w-80 opacity-100' : 'w-0 opacity-0',
-            'transition-[width,opacity] duration-300 ease-out',
+            'transition-[width,opacity] duration-slow ease-out',
             className,
         )}
     >
diff --git a/src/shared/ui/Slider/Slider.svelte b/src/shared/ui/Slider/Slider.svelte
index 2b2de67..081dd29 100644
--- a/src/shared/ui/Slider/Slider.svelte
+++ b/src/shared/ui/Slider/Slider.svelte
@@ -70,17 +70,17 @@ let {
 const isVertical = $derived(orientation === 'vertical');
 
 const labelClasses = `font-mono text-2xs tabular-nums shrink-0
-    text-secondary
+    text-subtle
     group-hover:text-neutral-700 dark:group-hover:text-neutral-300
     transition-colors`;
 
 const thumbClasses = `block w-2.5 h-2.5 bg-brand
-    rotate-45 shadow-sm
+    rotate-45 shadow-rest
     hover:scale-125
     focus-visible:outline-none
     focus-visible:ring-2 focus-visible:ring-brand/20
     data-active:scale-90
-    transition-transform duration-150
+    transition-transform duration-fast
     disabled:pointer-events-none disabled:opacity-50
     cursor-grab active:cursor-grabbing`;
 </script>
diff --git a/src/widgets/ComparisonView/ui/FontList/FontList.svelte b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
index 70b9fb7..0d2b94c 100644
--- a/src/widgets/ComparisonView/ui/FontList/FontList.svelte
+++ b/src/widgets/ComparisonView/ui/FontList/FontList.svelte
@@ -110,28 +110,28 @@ function isFontReady(font: UnifiedFont): boolean {
                         <div class="w-full px-3 py-3 flex items-center justify-between">
                             <div class="flex-1 flex items-center gap-3">
                                 <Skeleton
-                                    class="h-4 w-32 bg-neutral-200/70 dark:bg-neutral-800/70"
+                                    class="h-4 w-32 skeleton-fill"
                                     style="width: {getSkeletonWidth(index)}"
                                 />
                             </div>
-                            <Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
+                            <Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
                         </div>
                     {/each}
                 </div>
             {/snippet}
 
             {#snippet children({ item: font, index })}
-                <div class="relative h-[44px] w-full">
+                <div class="relative h-11 w-full">
                     {#if !isFontReady(font)}
                         <div
                             class="absolute inset-0 px-3 md:px-4 flex items-center justify-between border border-transparent"
                             transition:fade={{ duration: 300 }}
                         >
                             <Skeleton
-                                class="h-4 bg-neutral-200/70 dark:bg-neutral-800/70"
+                                class="h-4 skeleton-fill"
                                 style="width: {getSkeletonWidth(index)}"
                             />
-                            <Skeleton class="w-1.5 h-1.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800/70" />
+                            <Skeleton class="w-1.5 h-1.5 rounded-full skeleton-fill" />
                         </div>
                     {:else}
                         {@const isSelectedA = font.id === comparisonStore.fontA?.id}
@@ -141,9 +141,10 @@ function isFontReady(font: UnifiedFont): boolean {
                         <div transition:fade={{ duration: 300 }} class="h-full">
                             <Button
                                 variant="tertiary"
+                                layout="block-list-row"
                                 {active}
                                 onclick={() => handleSelect(font)}
-                                class="w-full h-full px-3 md:px-4 py-2.5 md:py-3 flex !justify-between text-left text-sm"
+                                class="h-full"
                                 iconPosition="right"
                             >
                                 <FontApplicator {font}>
diff --git a/src/widgets/ComparisonView/ui/Header/Header.svelte b/src/widgets/ComparisonView/ui/Header/Header.svelte
index eaaab84..f2a30d8 100644
--- a/src/widgets/ComparisonView/ui/Header/Header.svelte
+++ b/src/widgets/ComparisonView/ui/Header/Header.svelte
@@ -53,7 +53,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
         'px-4 md:px-8 py-4 md:py-6',
         'h-16 md:h-20 z-20',
         'border-b border-subtle',
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
         className,
     )}
 >
diff --git a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
index c44c8f5..76c1f02 100644
--- a/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
+++ b/src/widgets/ComparisonView/ui/Sidebar/Sidebar.svelte
@@ -43,7 +43,7 @@ let {
     class={cn(
         'flex flex-col h-full',
         'w-80',
-        'bg-surface dark:bg-dark-bg',
+        'surface-canvas',
         'border-r border-subtle',
         'transition-colors duration-500',
         className,
@@ -54,7 +54,7 @@ let {
         class="
             p-6 shrink-0
             border-b border-subtle
-            bg-surface dark:bg-dark-bg
+            surface-canvas
         "
     >
         <!-- Title -->
@@ -90,7 +90,7 @@ let {
     </div>
 
     <!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
-    <div class="flex-1 min-h-0 bg-surface dark:bg-dark-bg">
+    <div class="flex-1 min-h-0 surface-canvas">
         {#if main}
             {@render main()}
         {/if}
@@ -101,7 +101,7 @@ let {
         <div
             class="
                 shrink-0 p-6
-                bg-surface dark:bg-dark-bg
+                surface-canvas
                 border-t border-subtle
                 z-10
             "
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 555a77c..d717e4b 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -233,14 +233,14 @@ const scaleClass = $derived(
     Outer flex container — fills parent.
     The paper div inside scales down when the sidebar opens on desktop.
 -->
-<div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
+<div class={cn('flex-1 relative flex-center p-0 overflow-hidden surface-canvas', className)}>
     <!-- Paper surface -->
     <div
         class={cn(
-            'w-full h-full flex flex-col items-center justify-center relative',
+            'w-full h-full flex flex-col flex-center relative',
             'bg-paper dark:bg-dark-card',
-            'shadow-2xl shadow-black/5 dark:shadow-black/20',
-            'transition-transform duration-300 ease-out',
+            'shadow-floating-panel dark:shadow-floating-panel-dark',
+            'transition-transform duration-slow ease-out',
             scaleClass,
         )}
     >
diff --git a/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte b/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte
index d7f665a..fb41ca4 100644
--- a/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte
+++ b/src/widgets/ComparisonView/ui/Thumb/Thumb.svelte
@@ -36,9 +36,9 @@ let { sliderPos, isDragging }: Props = $props();
             '-ml-2.5 md:-ml-3',
             'mt-2 md:mt-4',
             'bg-brand text-white',
-            'flex items-center justify-center',
+            'flex-center',
             'rounded-none shadow-md',
-            'transition-transform duration-150',
+            'transition-transform duration-fast',
             isDragging ? 'scale-110' : 'scale-100',
         )}
     >
@@ -52,9 +52,9 @@ let { sliderPos, isDragging }: Props = $props();
             '-ml-2.5 md:-ml-3',
             'mb-2 md:mb-4',
             'bg-brand text-white',
-            'flex items-center justify-center',
+            'flex-center',
             'rounded-none shadow-md',
-            'transition-transform duration-150',
+            'transition-transform duration-fast',
             isDragging ? 'scale-110' : 'scale-100',
         )}
     >
diff --git a/src/widgets/Footer/ui/Footer/Footer.svelte b/src/widgets/Footer/ui/Footer/Footer.svelte
index 6452d7e..25be409 100644
--- a/src/widgets/Footer/ui/Footer/Footer.svelte
+++ b/src/widgets/Footer/ui/Footer/Footer.svelte
@@ -14,15 +14,19 @@ const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge)
 const currentYear = new Date().getFullYear();
 </script>
 
+<!--
+    z-20 keeps the footer below the sidebar's mobile/tablet overlay
+    (z-40) and panel (z-50) so an open sidebar fully covers the link.
+-->
 <footer
     class={cn(
-        'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
+        'fixed z-20 flex flex-row items-end gap-1 pointer-events-none',
         isVertical ? 'bottom-2.5 right-2.5 [writing-mode:vertical-rl] rotate-180' : 'bottom-4 left-4',
     )}
 >
     <!-- Project Name (Horizontal) -->
     {#if isVertical}
-        <div class="flex flex-row pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 border border-subtle">
+        <div class="flex flex-row pointer-events-auto items-center gap-2 surface-floating backdrop-blur-sm px-2 py-1">
             <div class="w-1.5 h-1.5 bg-brand"></div>
             <span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
                 GlyphDiff © 2025 — {currentYear}
diff --git a/src/widgets/SampleList/ui/SampleList/SampleList.svelte b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
index 09d5258..2d37b8a 100644
--- a/src/widgets/SampleList/ui/SampleList/SampleList.svelte
+++ b/src/widgets/SampleList/ui/SampleList/SampleList.svelte
@@ -84,7 +84,7 @@ const fontRowHeight = $derived.by(() =>
 {#snippet skeleton()}
     <div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
         {#each Array(5) as _, i}
-            <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
+            <div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-subtle bg-background/40">
                 <div class="flex items-center justify-between mb-3 sm:mb-4">
                     <Skeleton class="h-6 sm:h-8 w-1/3" />
                     <Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
-- 
2.52.0


From 8eee815e9a941e57f95878c5a738122828f74dd1 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:56:51 +0300
Subject: [PATCH 23/29] refactor(styles): improve light-mode contrast across
 surfaces and muted text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dark mode unchanged. Targets that were reported as "barely visible" in
light theme:

Surfaces / dividers
- --color-border-subtle (light) bumped from rgb(0 0 0 / 0.05) to
  --neutral-300 (matches the Input underline variant's border color and
  yields a visible hairline on bg-surface / bg-paper).
- New bg-subtle utility (same color as border-subtle but as
  background-color) — used by Divider component and the TypographyMenu
  inline column separator. Replaces ad-hoc 'bg-black/5 dark:bg-white/10'
  and 'bg-black/10 dark:bg-white/10' bands.
- FontSearch + ComparisonView Search wrapper borders switched from
  hand-written 'border-swiss-black/5 dark:border-white/10' to
  border-subtle so they participate in the palette.

Muted text
- Button tertiary inactive text (light) bumped neutral-400 → neutral-600
  (~2.7:1 → ~7.5:1 contrast). Covers the A/B toggle and the font-list
  rows in the sidebar.
- Label/TechText muted variant (light) bumped neutral-400 → neutral-600.
  Covers the ComboControl value text.
- Link text aligned to neutral-500 / neutral-400 (subtle but visible).

No behavior changes; pure styling.
---
 src/app/styles/app.css                                   | 9 ++++++++-
 .../ui/TypographyMenu/TypographyMenu.svelte              | 2 +-
 src/shared/ui/Button/Button.svelte                       | 6 ++++--
 src/shared/ui/Divider/Divider.svelte                     | 2 +-
 src/shared/ui/Label/config.ts                            | 4 +++-
 src/shared/ui/Link/Link.svelte                           | 2 +-
 src/widgets/ComparisonView/ui/Search/Search.svelte       | 2 +-
 src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte   | 4 ++--
 8 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 9febc0a..0de879a 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -16,7 +16,7 @@
 
   /* Semantic mode-switching colors. These are redefined inside `.dark`
      so utilities that reference them auto-adapt without a `dark:` variant. */
-  --color-border-subtle: rgb(0 0 0 / 0.05);
+  --color-border-subtle: var(--neutral-300);
   --color-text-subtle: var(--neutral-500);
   --color-skeleton: var(--neutral-200);
 
@@ -336,6 +336,13 @@
   border-color: var(--color-border-subtle);
 }
 
+/* Same color as border-subtle, applied via background-color — for 1px
+   dividers, inline separator strips, and other hairlines that aren't
+   element borders. */
+@utility bg-subtle {
+  background-color: var(--color-border-subtle);
+}
+
 /* Muted text color — paired with `border-subtle` naming. The previous
    name `text-secondary` collided with Tailwind v4 auto-generating a
    utility from `--color-secondary` (the shadcn near-white surface token
diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index e434ec4..a4f3e47 100644
--- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
@@ -168,7 +168,7 @@ $effect(() => {
                 <!-- Controls with dividers between each -->
                 {#each typographySettingsStore.controls as control, i (control.id)}
                     {#if i > 0}
-                        <div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
+                        <div class="w-px h-6 md:h-8 bg-subtle mx-0.5 md:mx-1 shrink-0"></div>
                     {/if}
 
                     <ComboControl
diff --git a/src/shared/ui/Button/Button.svelte b/src/shared/ui/Button/Button.svelte
index d533cd2..58d184d 100644
--- a/src/shared/ui/Button/Button.svelte
+++ b/src/shared/ui/Button/Button.svelte
@@ -143,9 +143,11 @@ const variantStyles: Record<ButtonVariant, string> = {
     tertiary: cn(
         // Font override — must come after base in cn() to win via tailwind-merge
         'font-secondary font-medium normal-case tracking-normal',
-        // Inactive state
+        // Inactive state — bumped in light mode for readable contrast against
+        // bg-surface (~7.5:1 vs. the prior ~2.7:1 with neutral-400). Dark
+        // unchanged because the existing tone reads well on dark-bg.
         'bg-transparent',
-        'text-neutral-400 dark:text-neutral-400',
+        'text-neutral-600 dark:text-neutral-400',
         'border border-transparent',
         // Hover (inactive) — semi-transparent lift, no bg-paper token
         'hover:bg-paper/50 dark:hover:bg-dark-card/50',
diff --git a/src/shared/ui/Divider/Divider.svelte b/src/shared/ui/Divider/Divider.svelte
index 74baa67..7cdf9fa 100644
--- a/src/shared/ui/Divider/Divider.svelte
+++ b/src/shared/ui/Divider/Divider.svelte
@@ -25,7 +25,7 @@ let {
 
 <div
     class={cn(
-        'bg-black/10 dark:bg-white/10',
+        'bg-subtle',
         orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
         className,
     )}
diff --git a/src/shared/ui/Label/config.ts b/src/shared/ui/Label/config.ts
index deb2a13..c1aebb4 100644
--- a/src/shared/ui/Label/config.ts
+++ b/src/shared/ui/Label/config.ts
@@ -25,7 +25,9 @@ export const labelSizeConfig: Record<LabelSize, string> = {
 export const labelVariantConfig: Record<LabelVariant, string> = {
     default: 'text-neutral-900 dark:text-neutral-100',
     accent: 'text-brand',
-    muted: 'text-neutral-400 dark:text-neutral-500',
+    /* Light mode bumped from neutral-400 (~2.7:1 contrast, barely visible)
+       to neutral-600 (~7.5:1). Dark mode unchanged. */
+    muted: 'text-neutral-600 dark:text-neutral-500',
     success: 'text-green-600 dark:text-green-400',
     warning: 'text-yellow-600 dark:text-yellow-400',
     error: 'text-brand',
diff --git a/src/shared/ui/Link/Link.svelte b/src/shared/ui/Link/Link.svelte
index 653caab..4ed5d10 100644
--- a/src/shared/ui/Link/Link.svelte
+++ b/src/shared/ui/Link/Link.svelte
@@ -34,7 +34,7 @@ let {
 <a
     class={cn(
         'group inline-flex items-center gap-1 text-2xs font-mono uppercase tracking-wider-mono',
-        'text-neutral-400 hover:text-brand transition-colors',
+        'text-neutral-500 dark:text-neutral-400 hover:text-brand transition-colors',
         'bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-2 py-1 pointer-events-auto',
         className,
     )}
diff --git a/src/widgets/ComparisonView/ui/Search/Search.svelte b/src/widgets/ComparisonView/ui/Search/Search.svelte
index 73bc079..f281cb6 100644
--- a/src/widgets/ComparisonView/ui/Search/Search.svelte
+++ b/src/widgets/ComparisonView/ui/Search/Search.svelte
@@ -9,7 +9,7 @@ import { appliedFilterStore } from '$features/FilterAndSortFonts';
 import { SearchBar } from '$shared/ui';
 </script>
 
-<div class="p-6 border-b border-black/5">
+<div class="p-6 border-b border-subtle">
     <SearchBar
         id="font-search"
         class="w-full"
diff --git a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
index b5f66b3..928392a 100644
--- a/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
+++ b/src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
@@ -51,8 +51,8 @@ function toggleFilters() {
 }
 </script>
 
-<div class="flex flex-col gap-3 border-b border-t border-swiss-black/5 dark:border-white/10">
-    <div class="relative w-full flex flex-col md:flex-row gap-y-4 border-b border-swiss-black/5 dark:border-white/10 py-4 md:py-6">
+<div class="flex flex-col gap-3 border-b border-t border-subtle">
+    <div class="relative w-full flex flex-col md:flex-row gap-y-4 border-b border-subtle py-4 md:py-6">
         <SearchBar
             id="font-search"
             class="w-full"
-- 
2.52.0


From b5fec3a1ba54456c5bf9cc93e563ea1b6a436006 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:57:23 +0300
Subject: [PATCH 24/29] fix(SliderArea): inset paper with padding instead of
 scale for even gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

scale-[0.94] shrinks proportionally — on wide viewports this produced
visibly larger horizontal gaps than vertical ones when the sidebar
opens, and it left the text engine measuring the un-scaled width
(causing the thumb-to-character morph boundary to drift).

Switch to outer-container padding (p-6 when sidebar is open on desktop)
so the paper inherits an equal pixel inset on all four sides. The
ResizeObserver picks up the new dimensions and the layout engine
re-wraps text at the actual rendered width.
---
 .../ui/SliderArea/SliderArea.svelte           | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index d717e4b..310ed0b 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -221,27 +221,34 @@ const gridStyle = $derived(
         + `background-size: ${isMobile ? '10px 10px' : '20px 20px'};`,
 );
 
-// Replaces motion.div animate={{ scale: isSidebarOpen && !isMobile ? 0.94 :1 }}
-const scaleClass = $derived(
-    isSidebarOpen && !isMobile
-        ? 'scale-[0.94]'
-        : 'scale-100',
+// When the sidebar opens on desktop, the canvas pads in on every side
+// so the paper insets evenly (equal pixel gaps top/bottom/left/right)
+// instead of shrinking proportionally with a transform — which on wide
+// viewports produced uneven horizontal vs. vertical gaps and also
+// caused the layout engine to measure the un-scaled width.
+const paddingClass = $derived(
+    isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
 );
 </script>
 
 <!--
     Outer flex container — fills parent.
-    The paper div inside scales down when the sidebar opens on desktop.
+    Pads in when the sidebar opens on desktop, insetting the paper evenly.
 -->
-<div class={cn('flex-1 relative flex-center p-0 overflow-hidden surface-canvas', className)}>
+<div
+    class={cn(
+        'flex-1 relative flex-center overflow-hidden surface-canvas',
+        'transition-[padding] duration-slow ease-out',
+        paddingClass,
+        className,
+    )}
+>
     <!-- Paper surface -->
     <div
         class={cn(
             'w-full h-full flex flex-col flex-center relative',
             'bg-paper dark:bg-dark-card',
             'shadow-floating-panel dark:shadow-floating-panel-dark',
-            'transition-transform duration-slow ease-out',
-            scaleClass,
         )}
     >
         <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
-- 
2.52.0


From 410a7cd37e333356470f323c85c7aabe29bebcd6 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 10:57:54 +0300
Subject: [PATCH 25/29] feat(SliderArea): keyboard accessibility for the
 comparison slider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slider element had role="slider" and tabindex="0" but no keyboard
handler — the focus ring appeared but the slider could not be moved.

Add a keydown handler implementing the standard ARIA slider contract:
- ArrowLeft / ArrowDown — step left by 1 percent
- ArrowRight / ArrowUp — step right by 1 percent
- Shift + arrow — coarse step (10 percent)
- PageUp / PageDown — coarse step (10 percent)
- Home — jump to 0
- End — jump to 100

Bounds and step sizes extracted as named constants (SLIDER_MIN,
SLIDER_MAX, SLIDER_STEP_FINE, SLIDER_STEP_COARSE). Position updates go
through sliderSpring.target so keyboard moves animate the same way as
pointer drags.

Also adds the missing ARIA attributes that screen readers need:
- aria-valuemin / aria-valuemax (bounds)
- aria-orientation (horizontal)
---
 .../ui/SliderArea/SliderArea.svelte           | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 310ed0b..cfa81ae 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -70,6 +70,19 @@ const SLIDER_PERSIST_DEBOUNCE_MS = 100;
 const SLIDER_PADDING_MOBILE_PX = 48;
 const SLIDER_PADDING_DESKTOP_PX = 96;
 
+/**
+ * Position bounds (percent of container width).
+ */
+const SLIDER_MIN = 0;
+const SLIDER_MAX = 100;
+
+/**
+ * Fine and coarse keyboard step sizes. Shift / Page keys use the coarse
+ * step; bare arrow keys use the fine step.
+ */
+const SLIDER_STEP_FINE = 1;
+const SLIDER_STEP_COARSE = 10;
+
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
@@ -130,6 +143,46 @@ function startDragging(e: PointerEvent) {
     handleMove(e);
 }
 
+/**
+ * Keyboard control for the comparison slider. Implements the standard
+ * ARIA slider keyboard contract: arrows step the position, Shift+arrow
+ * and PageUp/PageDown jump by the coarse step, Home/End snap to bounds.
+ */
+function handleKeydown(e: KeyboardEvent) {
+    const coarse = e.shiftKey;
+    const step = coarse ? SLIDER_STEP_COARSE : SLIDER_STEP_FINE;
+    const current = sliderSpring.target;
+    let next = current;
+
+    switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            next = current - step;
+            break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+            next = current + step;
+            break;
+        case 'PageDown':
+            next = current - SLIDER_STEP_COARSE;
+            break;
+        case 'PageUp':
+            next = current + SLIDER_STEP_COARSE;
+            break;
+        case 'Home':
+            next = SLIDER_MIN;
+            break;
+        case 'End':
+            next = SLIDER_MAX;
+            break;
+        default:
+            return;
+    }
+
+    e.preventDefault();
+    sliderSpring.target = Math.max(SLIDER_MIN, Math.min(SLIDER_MAX, next));
+}
+
 const storeSliderPosition = debounce((value: number) => {
     comparisonStore.sliderPosition = value;
 }, SLIDER_PERSIST_DEBOUNCE_MS);
@@ -271,8 +324,12 @@ const paddingClass = $derived(
                     role="slider"
                     tabindex="0"
                     aria-valuenow={Math.round(sliderPos)}
+                    aria-valuemin={SLIDER_MIN}
+                    aria-valuemax={SLIDER_MAX}
+                    aria-orientation="horizontal"
                     aria-label="Font comparison slider"
                     onpointerdown={startDragging}
+                    onkeydown={handleKeydown}
                     class="
                         relative w-full max-w-6xl h-full
                         flex flex-col justify-center
-- 
2.52.0


From 37886f3aa7131271c9f65c5c8d71961346a2a007 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 11:01:11 +0300
Subject: [PATCH 26/29] refactor(TypographyMenu): use separators in one style

---
 .../ui/TypographyMenu/TypographyMenu.svelte                 | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
index a4f3e47..1e234dd 100644
--- a/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/AdjustTypography/ui/TypographyMenu/TypographyMenu.svelte
@@ -153,7 +153,7 @@ $effect(() => {
                 )}
             >
                 <!-- Header: icon + label -->
-                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-subtle mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
+                <div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 mr-1 text-swiss-black dark:text-neutral-200 shrink-0">
                     <Settings2Icon
                         size={14}
                         class="text-swiss-red"
@@ -167,9 +167,7 @@ $effect(() => {
 
                 <!-- Controls with dividers between each -->
                 {#each typographySettingsStore.controls as control, i (control.id)}
-                    {#if i > 0}
-                        <div class="w-px h-6 md:h-8 bg-subtle mx-0.5 md:mx-1 shrink-0"></div>
-                    {/if}
+                    <div class="w-px h-4 md:h-6 bg-subtle mx-0.5 md:mx-1 shrink-0"></div>
 
                     <ComboControl
                         control={control.instance}
-- 
2.52.0


From 80241aa352c98606eb8e302c6df8d295369572fa Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 11:07:20 +0300
Subject: [PATCH 27/29] refactor(SliderArea): remove $derived className

---
 .../ui/SliderArea/SliderArea.svelte            | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index cfa81ae..0ff2440 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -266,22 +266,6 @@ $effect(() => {
         cancelled = true;
     };
 });
-
-// Dynamic backgroundSize based on isMobile — can't express this in Tailwind.
-// Color is set to currentColor so it respects dark mode via text color.
-const gridStyle = $derived(
-    `background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); `
-        + `background-size: ${isMobile ? '10px 10px' : '20px 20px'};`,
-);
-
-// When the sidebar opens on desktop, the canvas pads in on every side
-// so the paper insets evenly (equal pixel gaps top/bottom/left/right)
-// instead of shrinking proportionally with a transform — which on wide
-// viewports produced uneven horizontal vs. vertical gaps and also
-// caused the layout engine to measure the un-scaled width.
-const paddingClass = $derived(
-    isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
-);
 </script>
 
 <!--
@@ -292,7 +276,7 @@ const paddingClass = $derived(
     class={cn(
         'flex-1 relative flex-center overflow-hidden surface-canvas',
         'transition-[padding] duration-slow ease-out',
-        paddingClass,
+        isSidebarOpen && !isMobile ? 'p-6' : 'p-0',
         className,
     )}
 >
-- 
2.52.0


From ffc28f78f544aa7b51d4b70ac924dcc5434e324b Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 11:08:04 +0300
Subject: [PATCH 28/29] refactor(SliderArea): bump the padding to avoid overlap
 with TypographyMenu

---
 src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 0ff2440..debff88 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -297,7 +297,7 @@ $effect(() => {
         </div>
 
         <!-- Slider interaction area -->
-        <div class="w-full h-full flex items-center justify-center p-4 md:p-8 overflow-hidden">
+        <div class="w-full h-full flex items-center justify-center p-4 md:p-12 overflow-hidden">
             {#if isLoading}
                 <div out:fade={{ duration: 300 }}>
                     <Loader size={24} />
-- 
2.52.0


From 4126275c4d6aac17c559f321d1965a31c4214312 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 25 May 2026 11:09:26 +0300
Subject: [PATCH 29/29] refactor(SliderArea): extract grid overlay into bg-grid
 utilities

The decorative dotted-grid background on the paper surface was a
6-line $derived gridStyle string applied via inline style="" plus four
extra utility classes for color and opacity. Replace with two named
utilities and let CSS handle the responsive switch.

app.css:
- New --color-grid-line CSS var (light + dark) so the grid colour and
  intensity auto-switch without consumers needing a dark: variant or an
  opacity layer.
- @utility bg-grid (20px cells) and @utility bg-grid-sm (10px cells).
  Both reference --color-grid-line, so the same markup paints correctly
  in light and dark mode.

SliderArea.svelte:
- Drop the gridStyle $derived block and the inline style= attribute.
- Overlay becomes a single line:
  <div class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
       aria-hidden="true" />
  Mobile picks the tight 10px grid; the md: breakpoint flips to 20px,
  matching the prior JS-driven behaviour with no extra runtime cost.
---
 src/app/styles/app.css                        | 21 +++++++++++++++++++
 .../ui/SliderArea/SliderArea.svelte           |  5 ++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/app/styles/app.css b/src/app/styles/app.css
index 0de879a..909b793 100644
--- a/src/app/styles/app.css
+++ b/src/app/styles/app.css
@@ -19,6 +19,7 @@
   --color-border-subtle: var(--neutral-300);
   --color-text-subtle: var(--neutral-500);
   --color-skeleton: var(--neutral-200);
+  --color-grid-line: rgb(0 0 0 / 0.03);
 
   /* Neutral Grays */
   --neutral-50: #fafafa;
@@ -114,6 +115,7 @@
   --color-border-subtle: rgb(255 255 255 / 0.1);
   --color-text-subtle: var(--neutral-400);
   --color-skeleton: var(--neutral-800);
+  --color-grid-line: rgb(255 255 255 / 0.05);
 
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
@@ -401,6 +403,25 @@
   background-color: color-mix(in srgb, var(--color-skeleton) 70%, transparent);
 }
 
+/* Subtle dotted-grid overlay used as a decorative background on the
+   comparison paper surface. Color and intensity auto-switch via
+   --color-grid-line. `bg-grid-sm` uses a tighter cell — typical mobile
+   choice; `bg-grid` is the default desktop cell. Pair with absolute /
+   pointer-events-none on the overlay element. */
+@utility bg-grid {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+@utility bg-grid-sm {
+  background-image:
+    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
+  background-size: 10px 10px;
+}
+
 /* ── Typography ───────────────────────────────────────────────── */
 
 @utility text-label-mono {
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index debff88..a5ae2de 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -288,10 +288,9 @@ $effect(() => {
             'shadow-floating-panel dark:shadow-floating-panel-dark',
         )}
     >
-        <!-- Subtle grid overlay — pointer-events-none, very low opacity -->
+        <!-- Subtle dotted-grid overlay — purely decorative. -->
         <div
-            class="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05] text-swiss-black dark:text-swiss-white"
-            style={gridStyle}
+            class="absolute inset-0 pointer-events-none bg-grid-sm md:bg-grid"
             aria-hidden="true"
         >
         </div>
-- 
2.52.0