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

import {
    type ControlModel,
    createTypographyControl,
} from '$shared/lib';

/**
 * Creates a typography control manager that handles a collection of typography controls.
 *
 * @param configs - Array of control configurations.
 * @returns - Typography control manager instance.
 */
export function createTypographyControlManager(configs: ControlModel[]) {
    const controls = $state(
        configs.map(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => ({
            id,
            increaseLabel,
            decreaseLabel,
            controlLabel,
            instance: createTypographyControl(config),
        })),
    );

    return {
        get controls() {
            return controls;
        },
    };
}