feat: use typographySettingsStore everywhere for the typography settings

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

@@ -21,10 +21,7 @@ import {
     fontStore,
     getFontUrl,
 } from '$entities/Font';
-import {
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    createTypographyControlManager,
-} from '$features/SetupFont';
+import { typographySettingsStore } from '$features/SetupFont/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
 
@@ -68,8 +65,8 @@ export class ComparisonStore {
     #side = $state<Side>('A');
     /** Slider position for character morphing (0-100) */
     #sliderPosition = $state(50);
-    /** Typography controls for this comparison */
-    #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
+    // /** Typography controls for this comparison */
+    // #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
     /** TanStack Query-backed batch font fetcher */
     #batchStore: BatchFontStore;
 
@@ -99,7 +96,7 @@ export class ComparisonStore {
             $effect(() => {
                 const fa = this.#fontA;
                 const fb = this.#fontB;
-                const weight = this.#typography.weight;
+                const weight = typographySettingsStore.weight;
 
                 if (!fa || !fb) return;
 
@@ -152,8 +149,8 @@ export class ComparisonStore {
             return;
         }
 
-        const weight = this.#typography.weight;
-        const size = this.#typography.renderedSize;
+        const weight = typographySettingsStore.weight;
+        const size = typographySettingsStore.renderedSize;
         const fontAName = this.#fontA?.name;
         const fontBName = this.#fontB?.name;
 
@@ -201,12 +198,12 @@ export class ComparisonStore {
         };
     }
 
-    // ── Getters / Setters ─────────────────────────────────────────────────────
+    // // ── Getters / Setters ─────────────────────────────────────────────────────
 
-    /** Typography control manager */
-    get typography() {
-        return this.#typography;
-    }
+    // /** Typography control manager */
+    // get typography() {
+    //     return typographySettingsStore;
+    // }
 
     /** Font for side A */
     get fontA() {
@@ -273,7 +270,7 @@ export class ComparisonStore {
         this.#fontB = undefined;
         this.#batchStore.setIds([]);
         storage.clear();
-        this.#typography.reset();
+        typographySettingsStore.reset();
     }
 }