feat(ComparisonSlider): add separate typographyManager instance into comparisonStore and use its controls in the slider. Improve mobile usability using Drawer for all the settings

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

@@ -3,6 +3,10 @@ import {
     fetchFontsByIds,
     unifiedFontStore,
 } from '$entities/Font';
+import {
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+    createTypographyControlManager,
+} from '$features/SetupFont';
 import { createPersistentStore } from '$shared/lib';
 
 /**
@@ -30,6 +34,7 @@ class ComparisonStore {
     #fontB = $state<UnifiedFont | undefined>();
     #sampleText = $state('The quick brown fox jumps over the lazy dog');
     #isRestoring = $state(true);
+    #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
 
     constructor() {
         this.restoreFromStorage();
@@ -102,6 +107,9 @@ class ComparisonStore {
     }
 
     // --- Getters & Setters ---
+    get typography() {
+        return this.#typography;
+    }
 
     get fontA() {
         return this.#fontA;
@@ -149,6 +157,13 @@ class ComparisonStore {
             this.restoreFromStorage();
         }
     }
+
+    resetAll() {
+        this.#fontA = undefined;
+        this.#fontB = undefined;
+        storage.clear();
+        this.#typography.reset();
+    }
 }
 
 export const comparisonStore = new ComparisonStore();