frontend-svelte/.storybook/Decorator.svelte

<!--
    Component: Decorator
    Global Storybook decorator that wraps all stories with necessary providers.

    This provides:
    - ResponsiveManager context for breakpoint tracking
    - TooltipProvider for shadcn Tooltip components
-->
<script lang="ts">
import { createResponsiveManager } from '$shared/lib';
import type { ResponsiveManager } from '$shared/lib';
import { setContext } from 'svelte';

interface Props {
    children: import('svelte').Snippet;
}

let { children }: Props = $props();

// Create and provide responsive context
const responsiveManager = createResponsiveManager();
$effect(() => responsiveManager.init());
setContext<ResponsiveManager>('responsive', responsiveManager);
</script>

{@render children()}