<script module>
import Providers from '$shared/lib/storybook/Providers.svelte';
import { defineMeta } from '@storybook/addon-svelte-csf';
import TypographyMenu from './TypographyMenu.svelte';

const { Story } = defineMeta({
    title: 'Features/TypographyMenu',
    component: TypographyMenu,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Floating typography controls. Mobile/tablet: settings button that opens a popover. Desktop: inline bar with combo controls.',
            },
            story: { inline: false },
        },
        layout: 'centered',
        storyStage: { maxWidth: 'max-w-xl' },
    },
    argTypes: {
        hidden: { control: 'boolean' },
    },
});
</script>

<Story name="Desktop">
    {#snippet template()}
        <Providers>
            <div class="relative h-20 flex items-end justify-center p-4">
                <TypographyMenu />
            </div>
        </Providers>
    {/snippet}
</Story>

<Story name="Hidden">
    {#snippet template()}
        <Providers>
            <div class="relative h-20 flex items-end justify-center p-4">
                <TypographyMenu hidden={true} />
            </div>
        </Providers>
    {/snippet}
</Story>
