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

@@ -1,7 +1,49 @@
 import {
     type ControlModel,
+    type TypographyControl,
     createTypographyControl,
 } from '$shared/lib';
+import { SvelteMap } from 'svelte/reactivity';
+
+export interface Control {
+    id: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    controlLabel?: string;
+    instance: TypographyControl;
+}
+
+export class TypographyControlManager {
+    #controls = new SvelteMap<string, Control>();
+
+    constructor(configs: ControlModel[]) {
+        configs.forEach(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => {
+            this.#controls.set(id, {
+                id,
+                increaseLabel,
+                decreaseLabel,
+                controlLabel,
+                instance: createTypographyControl(config),
+            });
+        });
+    }
+
+    get controls() {
+        return this.#controls.values();
+    }
+
+    get weight() {
+        return this.#controls.get('font_weight')?.instance.value ?? 400;
+    }
+
+    get size() {
+        return this.#controls.get('font_size')?.instance.value;
+    }
+
+    get height() {
+        return this.#controls.get('line_height')?.instance.value;
+    }
+}
 
 /**
  * Creates a typography control manager that handles a collection of typography controls.
@@ -10,19 +52,5 @@ import {
  * @returns - Typography control manager instance.
  */
 export function createTypographyControlManager(configs: ControlModel[]) {
-    const controls = $state(
+    return new TypographyControlManager(configs);
-        configs.map(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => ({
-            id,
-            increaseLabel,
-            decreaseLabel,
-            controlLabel,
-            instance: createTypographyControl(config),
-        })),
-    );
-
-    return {
-        get controls() {
-            return controls;
-        },
-    };
 }