feat: use typographySettingsStore everywhere for the typography settings

src/widgets/ComparisonView/ui/Character/Character.svelte

@@ -3,6 +3,7 @@
     Renders a single character with morphing animation
 -->
 <script lang="ts">
+import { typographySettingsStore } from '$features/SetupFont';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { comparisonStore } from '../../model';
 
@@ -25,7 +26,7 @@ let { char, proximity, isPast }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);

src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte

@@ -15,14 +15,13 @@ import {
     getContext,
     untrack,
 } from 'svelte';
-import { comparisonStore } from '../../model';
 import FontList from '../FontList/FontList.svelte';
 import Header from '../Header/Header.svelte';
 import Sidebar from '../Sidebar/Sidebar.svelte';
 import SliderArea from '../SliderArea/SliderArea.svelte';
 
 const responsive = getContext<ResponsiveManager>('responsive');
-const typography = $derived(comparisonStore.typography);
+// const typography = $derived(comparisonStore.typography);
 const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
 let isSidebarOpen = $state(!isMobileOrTabletPortrait);
 
@@ -45,50 +44,51 @@ $effect(() => {
                         {#snippet main()}
                             <FontList />
                         {/snippet}
-
-                        {#snippet controls()}
-                            {#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
-                                <ControlGroup label="Size">
-                                    <Slider
-                                        bind:value={typography.sizeControl.value}
-                                        min={typography.sizeControl.min}
-                                        max={typography.sizeControl.max}
-                                        step={typography.sizeControl.step}
-                                    />
-                                </ControlGroup>
-
-                                <ControlGroup label="Weight">
-                                    <Slider
-                                        bind:value={typography.weightControl.value}
-                                        min={typography.weightControl.min}
-                                        max={typography.weightControl.max}
-                                        step={typography.weightControl.step}
-                                    />
-                                </ControlGroup>
-
-                                <div class="grid grid-cols-2 gap-6 mt-4">
-                                    <ControlGroup label="Leading" class="border-0 py-0">
+                        <!--
+                            {#snippet controls()}
+                                {#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
+                                    <ControlGroup label="Size">
                                         <Slider
-                                            bind:value={typography.heightControl.value}
-                                            min={typography.heightControl.min}
-                                            max={typography.heightControl.max}
-                                            step={typography.heightControl.step}
-                                            format={(v => v.toFixed(1))}
+                                            bind:value={typography.sizeControl.value}
+                                            min={typography.sizeControl.min}
+                                            max={typography.sizeControl.max}
+                                            step={typography.sizeControl.step}
                                         />
                                     </ControlGroup>
 
-                                    <ControlGroup label="Tracking" class="border-0 py-0">
+                                    <ControlGroup label="Weight">
                                         <Slider
-                                            bind:value={typography.spacingControl.value}
-                                            min={typography.spacingControl.min}
-                                            max={typography.spacingControl.max}
-                                            step={typography.spacingControl.step}
-                                            format={(v => v.toFixed(2))}
+                                            bind:value={typography.weightControl.value}
+                                            min={typography.weightControl.min}
+                                            max={typography.weightControl.max}
+                                            step={typography.weightControl.step}
                                         />
                                     </ControlGroup>
-                                </div>
-                            {/if}
-                        {/snippet}
+
+                                    <div class="grid grid-cols-2 gap-6 mt-4">
+                                        <ControlGroup label="Leading" class="border-0 py-0">
+                                            <Slider
+                                                bind:value={typography.heightControl.value}
+                                                min={typography.heightControl.min}
+                                                max={typography.heightControl.max}
+                                                step={typography.heightControl.step}
+                                                format={(v => v.toFixed(1))}
+                                            />
+                                        </ControlGroup>
+
+                                        <ControlGroup label="Tracking" class="border-0 py-0">
+                                            <Slider
+                                                bind:value={typography.spacingControl.value}
+                                                min={typography.spacingControl.min}
+                                                max={typography.spacingControl.max}
+                                                step={typography.spacingControl.step}
+                                                format={(v => v.toFixed(2))}
+                                            />
+                                        </ControlGroup>
+                                    </div>
+                                {/if}
+                            {/snippet}
+                        -->
                     </Sidebar>
                 {/snippet}
             </SidebarContainer>

src/widgets/ComparisonView/ui/FontList/FontList.svelte

@@ -8,6 +8,7 @@ import {
     FontVirtualList,
     type UnifiedFont,
 } from '$entities/Font';
+import { typographySettingsStore } from '$features/SetupFont';
 import {
     Button,
     Label,
@@ -18,7 +19,7 @@ import { crossfade } from 'svelte/transition';
 import { comparisonStore } from '../../model';
 
 const side = $derived(comparisonStore.side);
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let prevIndexA: number | null = null;
 let prevIndexB: number | null = null;

src/widgets/ComparisonView/ui/Line/Line.svelte

@@ -3,8 +3,8 @@
     Renders a line of text in the SliderArea
 -->
 <script lang="ts">
+import { typographySettingsStore } from '$features/SetupFont';
 import type { Snippet } from 'svelte';
-import { comparisonStore } from '../../model';
 
 interface LineChar {
     char: string;
@@ -26,7 +26,7 @@ interface Props {
      */
     character: Snippet<[{ char: string; index: number }]>;
 }
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let { chars, character }: Props = $props();
 </script>

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -8,6 +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 {
     type ResponsiveManager,
     debounce,
@@ -42,7 +44,7 @@ let { isSidebarOpen = false, class: className }: Props = $props();
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
 const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
-const typography = $derived(comparisonStore.typography);
+const typography = $derived(typographySettingsStore);
 
 let container = $state<HTMLElement>();
 
@@ -179,12 +181,7 @@ const scaleClass = $derived(
     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)}>
-    <!--
-        Paper surface.
-        Replaces the old glassmorphism card with a clean white/dark sheet.
-        Scale transition replaces motion.div spring — CSS transition-transform
-        is smooth enough here; a JS spring would add ~4kb for minimal gain.
-    -->
+    <!-- Paper surface -->
     <div
         class={cn(
             'w-full h-full flex flex-col items-center justify-center relative',
@@ -248,4 +245,10 @@ const scaleClass = $derived(
             {/if}
         </div>
     </div>
+
+    <TypographyMenu
+        class={cn(
+            'absolute bottom-4 sm:bottom-5 right-4 sm:left-1/2 sm:right-[unset] sm:-translate-x-1/2 z-50',
+        )}
+    />
 </div>