<script lang="ts">
/**
 * Component containing controls for setting up font properties.
 */
import { Separator } from '$shared/shadcn/ui/separator/index';
import { Trigger as SidebarTrigger } from '$shared/shadcn/ui/sidebar';
import { ComboControl } from '$shared/ui';
import { controlManager } from '../model';
</script>

<div class="p-2 flex flex-row items-center gap-2">
    <SidebarTrigger />
    <Separator orientation="vertical" class="h-full" />
    <div class="flex flex-row gap-2">
        {#each controlManager.controls as control (control.id)}
            <ComboControl control={control.instance} />
        {/each}
    </div>
</div>
