feat(responsiveManager): add a manager to monitor responsive state and give access to responsive state flags

src/features/SetupFont/lib/controlManager/controlManager.svelte.ts

@@ -15,6 +15,7 @@ export interface Control {
 
 export class TypographyControlManager {
     #controls = new SvelteMap<string, Control>();
+    #sizeMultiplier = $state(1);
 
     constructor(configs: ControlModel[]) {
         configs.forEach(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => {
@@ -37,7 +38,8 @@ export class TypographyControlManager {
     }
 
     get size() {
-        return this.#controls.get('font_size')?.instance.value;
+        const size = this.#controls.get('font_size')?.instance.value;
+        return size === undefined ? undefined : size * this.#sizeMultiplier;
     }
 
     get height() {
@@ -47,6 +49,10 @@ export class TypographyControlManager {
     get spacing() {
         return this.#controls.get('letter_spacing')?.instance.value;
     }
+
+    set multiplier(value: number) {
+        this.#sizeMultiplier = value;
+    }
 }
 
 /**

src/features/SetupFont/ui/SetupFontMenu.svelte

@@ -3,8 +3,32 @@
     Contains controls for setting up font properties.
 -->
 <script lang="ts">
+import type { ResponsiveManager } from '$shared/lib';
 import { ComboControl } from '$shared/ui';
+import { getContext } from 'svelte';
 import { controlManager } from '../model';
+const responsive = getContext<ResponsiveManager>('responsive');
+
+$effect(() => {
+    if (!responsive) {
+        return;
+    }
+
+    switch (true) {
+        case responsive.isMobile:
+            controlManager.multiplier = 0.5;
+            break;
+        case responsive.isTablet:
+            controlManager.multiplier = 0.75;
+            break;
+        case responsive.isDesktop:
+            controlManager.multiplier = 1;
+            break;
+        default:
+            controlManager.multiplier = 1;
+            break;
+    }
+});
 </script>
 
 <div class="py-2 px-10 flex flex-row items-center gap-2">