feat: use typographySettingsStore everywhere for the typography settings

src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte

@@ -35,7 +35,6 @@ const { Story } = defineMeta({
 
 <script lang="ts">
 import type { UnifiedFont } from '$entities/Font';
-import { controlManager } from '$features/SetupFont';
 
 // Mock fonts for testing
 const mockArial: UnifiedFont = {

src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

@@ -8,14 +8,13 @@ import {
     FontApplicator,
     type UnifiedFont,
 } from '$entities/Font';
-import { controlManager } from '$features/SetupFont';
+import { typographySettingsStore } from '$features/SetupFont/model';
 import {
     Badge,
     ContentEditable,
     Divider,
     Footnote,
     Stat,
-    StatGroup,
 } from '$shared/ui';
 import { fly } from 'svelte/transition';
 
@@ -37,11 +36,6 @@ interface Props {
 
 let { font, text = $bindable(), index = 0 }: Props = $props();
 
-const fontWeight = $derived(controlManager.weight);
-const fontSize = $derived(controlManager.renderedSize);
-const lineHeight = $derived(controlManager.height);
-const letterSpacing = $derived(controlManager.spacing);
-
 // Adjust the property name to match your UnifiedFont type
 const fontType = $derived((font as any).type ?? (font as any).category ?? '');
 
@@ -52,10 +46,10 @@ const providerBadge = $derived(
 );
 
 const stats = $derived([
-    { label: 'SZ', value: `${fontSize}PX` },
+    { label: 'SZ', value: `${typographySettingsStore.renderedSize}PX` },
-    { label: 'WGT', value: `${fontWeight}` },
+    { label: 'WGT', value: `${typographySettingsStore.weight}` },
-    { label: 'LH', value: lineHeight?.toFixed(2) },
+    { label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
-    { label: 'LTR', value: `${letterSpacing}` },
+    { label: 'LTR', value: `${typographySettingsStore.spacing}` },
 ]);
 </script>
 
@@ -75,7 +69,7 @@ const stats = $derived([
         min-h-60
         rounded-none
     "
-    style:font-weight={fontWeight}
+    style:font-weight={typographySettingsStore.weight}
 >
     <!-- ── Header bar ─────────────────────────────────────────────────── -->
     <div
@@ -140,12 +134,12 @@ const stats = $derived([
 
     <!-- ── Main content area ──────────────────────────────────────────── -->
     <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
-        <FontApplicator {font} weight={fontWeight}>
+        <FontApplicator {font} weight={typographySettingsStore.weight}>
             <ContentEditable
                 bind:text
-                {fontSize}
+                fontSize={typographySettingsStore.renderedSize}
-                {lineHeight}
+                lineHeight={typographySettingsStore.height}
-                {letterSpacing}
+                letterSpacing={typographySettingsStore.spacing}
             />
         </FontApplicator>
     </div>

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

@@ -21,10 +21,7 @@ import {
     fontStore,
     getFontUrl,
 } from '$entities/Font';
-import {
+import { typographySettingsStore } from '$features/SetupFont/model';
-    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
-    createTypographyControlManager,
-} from '$features/SetupFont';
 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 controls for this comparison */
-    #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
+    // #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 weight = typographySettingsStore.weight;
-        const size = this.#typography.renderedSize;
+        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 */
+    // /** Typography control manager */
-    get typography() {
+    // get typography() {
-        return this.#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();
     }
 }
 

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()}
+                            {#snippet controls()}
-                            {#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
+                                {#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
-                                <ControlGroup label="Size">
+                                    <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">
                                         <Slider
-                                            bind:value={typography.heightControl.value}
+                                            bind:value={typography.sizeControl.value}
-                                            min={typography.heightControl.min}
+                                            min={typography.sizeControl.min}
-                                            max={typography.heightControl.max}
+                                            max={typography.sizeControl.max}
-                                            step={typography.heightControl.step}
+                                            step={typography.sizeControl.step}
-                                            format={(v => v.toFixed(1))}
                                         />
                                     </ControlGroup>
 
-                                    <ControlGroup label="Tracking" class="border-0 py-0">
+                                    <ControlGroup label="Weight">
                                         <Slider
-                                            bind:value={typography.spacingControl.value}
+                                            bind:value={typography.weightControl.value}
-                                            min={typography.spacingControl.min}
+                                            min={typography.weightControl.min}
-                                            max={typography.spacingControl.max}
+                                            max={typography.weightControl.max}
-                                            step={typography.spacingControl.step}
+                                            step={typography.weightControl.step}
-                                            format={(v => v.toFixed(2))}
                                         />
                                     </ControlGroup>
-                                </div>
+
-                            {/if}
+                                    <div class="grid grid-cols-2 gap-6 mt-4">
-                        {/snippet}
+                                        <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 -->
-        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.
-    -->
     <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>

src/widgets/SampleList/ui/SampleList/SampleList.svelte

@@ -14,7 +14,7 @@ import {
 import { FontSampler } from '$features/DisplayFont';
 import {
     TypographyMenu,
-    controlManager,
+    typographySettingsStore,
 } from '$features/SetupFont';
 import { throttle } from '$shared/lib/utils';
 import { Skeleton } from '$shared/ui';
@@ -60,11 +60,11 @@ const checkPosition = throttle(() => {
 const fontRowHeight = $derived.by(() =>
     createFontRowSizeResolver({
         getFonts: () => fontStore.fonts,
-        getWeight: () => controlManager.weight,
+        getWeight: () => typographySettingsStore.weight,
         getPreviewText: () => text,
         getContainerWidth: () => containerWidth,
-        getFontSizePx: () => controlManager.renderedSize,
+        getFontSizePx: () => typographySettingsStore.renderedSize,
-        getLineHeightPx: () => controlManager.height * controlManager.renderedSize,
+        getLineHeightPx: () => typographySettingsStore.height * typographySettingsStore.renderedSize,
         getStatus: key => appliedFontsManager.statuses.get(key),
         contentHorizontalPadding: SAMPLER_CONTENT_PADDING_X,
         chromeHeight: SAMPLER_CHROME_HEIGHT,
@@ -97,7 +97,7 @@ const fontRowHeight = $derived.by(() =>
     <FontVirtualList
         itemHeight={fontRowHeight}
         useWindowScroll={true}
-        weight={controlManager.weight}
+        weight={typographySettingsStore.weight}
         columns={layoutManager.columns}
         gap={layoutManager.gap}
         {skeleton}