chore(storybook): replace viewport with defaultViewport

.storybook/StoryStage.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 interface Props {
     children: import('svelte').Snippet;
-    width?: string; // Optional width override
+    /**
+     * Tailwind max-width class applied to the card, or 'none' to remove width constraint.
+     * @default 'max-w-3xl'
+     */
+    maxWidth?: string;
 }
 
-let { children, width = 'max-w-3xl' }: Props = $props();
+let { children, maxWidth = 'max-w-3xl' }: Props = $props();
 </script>
 
 <div class="flex min-h-screen w-full items-center justify-center bg-background p-8">
-    <div class="w-full bg-card shadow-lg ring-1 ring-border rounded-xl p-12 {width}">
+    <div class="w-full bg-card shadow-lg ring-1 ring-border rounded-xl p-12 {maxWidth !== 'none' ? maxWidth : ''}">
         <div class="relative flex justify-center items-center text-foreground">
             {@render children()}
         </div>

.storybook/preview.ts

@@ -5,68 +5,6 @@ import ThemeDecorator from './ThemeDecorator.svelte';
 import '../src/app/styles/app.css';
 
 const preview: Preview = {
-    globalTypes: {
-        viewport: {
-            description: 'Viewport size for responsive design',
-            defaultValue: 'widgetWide',
-            toolbar: {
-                icon: 'view',
-                items: [
-                    {
-                        value: 'reset',
-                        icon: 'refresh',
-                        title: 'Reset viewport',
-                    },
-                    {
-                        value: 'mobile1',
-                        icon: 'mobile',
-                        title: 'iPhone 5/SE',
-                    },
-                    {
-                        value: 'mobile2',
-                        icon: 'mobile',
-                        title: 'iPhone 14 Pro Max',
-                    },
-                    {
-                        value: 'tablet',
-                        icon: 'tablet',
-                        title: 'iPad (Portrait)',
-                    },
-                    {
-                        value: 'desktop',
-                        icon: 'desktop',
-                        title: 'Desktop (Small)',
-                    },
-                    {
-                        value: 'widgetMedium',
-                        icon: 'view',
-                        title: 'Widget Medium',
-                    },
-                    {
-                        value: 'widgetWide',
-                        icon: 'view',
-                        title: 'Widget Wide',
-                    },
-                    {
-                        value: 'widgetExtraWide',
-                        icon: 'view',
-                        title: 'Widget Extra Wide',
-                    },
-                    {
-                        value: 'fullWidth',
-                        icon: 'view',
-                        title: 'Full Width',
-                    },
-                    {
-                        value: 'fullScreen',
-                        icon: 'expand',
-                        title: 'Full Screen',
-                    },
-                ],
-                dynamicTitle: true,
-            },
-        },
-    },
     parameters: {
         layout: 'padded',
         controls: {
@@ -195,10 +133,11 @@ const preview: Preview = {
             },
         }),
         // Wrap with StoryStage for presentation styling
-        story => ({
+        (story, context) => ({
             Component: StoryStage,
             props: {
                 children: story(),
+                maxWidth: context.parameters.storyStage?.maxWidth,
             },
         }),
     ],

src/features/GetFonts/ui/FiltersControl/FilterControls.stories.svelte

@@ -30,7 +30,7 @@ const { Story } = defineMeta({
 
 <Story name="Mobile layout">
     {#snippet template()}
-        <Providers initialWidth={375}>
+        <Providers>
             <div style="width: 375px;">
                 <FilterControls />
             </div>

src/features/SetupFont/ui/TypographyMenu/TypographyMenu.stories.svelte

@@ -16,6 +16,7 @@ const { Story } = defineMeta({
             story: { inline: false },
         },
         layout: 'centered',
+        storyStage: { maxWidth: 'max-w-xl' },
     },
     argTypes: {
         hidden: { control: 'boolean' },
@@ -33,16 +34,6 @@ const { Story } = defineMeta({
     {/snippet}
 </Story>
 
-<Story name="Mobile">
-    {#snippet template()}
-        <Providers initialWidth={375}>
-            <div class="relative h-20 flex items-end justify-end p-4">
-                <TypographyMenu />
-            </div>
-        </Providers>
-    {/snippet}
-</Story>
-
 <Story name="Hidden">
     {#snippet template()}
         <Providers>

src/shared/lib/storybook/Providers.svelte

@@ -17,33 +17,9 @@ interface Props {
      * Content snippet
      */
     children: Snippet;
-    /**
-     * Initial viewport width
-     * @default 1280
-     */
-    initialWidth?: number;
-    /**
-     * Initial viewport height
-     * @default 720
-     */
-    initialHeight?: number;
-    /**
-     * Tooltip delay duration
-     */
-    tooltipDelayDuration?: number;
-    /**
-     * Tooltip skip delay duration
-     */
-    tooltipSkipDelayDuration?: number;
 }
 
-let {
+let { children }: Props = $props();
-    children,
-    initialWidth = 1280,
-    initialHeight = 720,
-    tooltipDelayDuration = 200,
-    tooltipSkipDelayDuration = 300,
-}: Props = $props();
 
 // Create a responsive manager with default breakpoints
 const responsiveManager = createResponsiveManager();

src/shared/ui/SidebarContainer/SidebarContainer.stories.svelte

@@ -80,7 +80,7 @@ const { Story } = defineMeta({
 
 <Story name="Mobile Open">
     {#snippet template()}
-        <Providers initialWidth={375}>
+        <Providers>
             <div class="h-64 relative overflow-hidden">
                 <SidebarContainer isOpen={true}>
                     {#snippet sidebar({ onClose })}

src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.stories.svelte

@@ -89,7 +89,7 @@ const { Story } = defineMeta({
 
 <Story
     name="Default"
-    parameters={{ globals: { viewport: 'fullScreen' } }}
+    parameters={{ viewport: { defaultViewport: 'fullScreen' } }}
 >
     {#snippet template()}
         <Providers>

src/widgets/FontSearch/ui/FontSearch/FontSearch.stories.svelte

@@ -98,13 +98,13 @@ let showFiltersClosed = $state(false);
 let showFiltersOpen = $state(true);
 </script>
 
-<Story name="Default" parameters={{ globals: { viewport: 'widgetWide' } }}>
+<Story name="Default" parameters={{ viewport: { defaultViewport: 'widgetWide' } }}>
     <div class="w-full max-w-3xl">
         <FontSearch bind:showFilters={showFiltersDefault} />
     </div>
 </Story>
 
-<Story name="Filters Open" parameters={{ globals: { viewport: 'widgetWide' } }}>
+<Story name="Filters Open" parameters={{ viewport: { defaultViewport: 'widgetWide' } }}>
     <div class="w-full max-w-3xl">
         <FontSearch bind:showFilters={showFiltersOpen} />
         <div class="mt-8 text-center">
@@ -113,7 +113,7 @@ let showFiltersOpen = $state(true);
     </div>
 </Story>
 
-<Story name="Filters Closed" parameters={{ globals: { viewport: 'widgetWide' } }}>
+<Story name="Filters Closed" parameters={{ viewport: { defaultViewport: 'widgetWide' } }}>
     <div class="w-full max-w-3xl">
         <FontSearch bind:showFilters={showFiltersClosed} />
         <div class="mt-8 text-center">
@@ -122,13 +122,13 @@ let showFiltersOpen = $state(true);
     </div>
 </Story>
 
-<Story name="Full Width" parameters={{ globals: { viewport: 'fullWidth' } }}>
+<Story name="Full Width" parameters={{ viewport: { defaultViewport: 'fullWidth' } }}>
     <div class="w-full px-8">
         <FontSearch />
     </div>
 </Story>
 
-<Story name="In Context" tags={['!autodocs']} parameters={{ globals: { viewport: 'widgetWide' } }}>
+<Story name="In Context" tags={['!autodocs']} parameters={{ viewport: { defaultViewport: 'widgetWide' } }}>
     <div class="w-full max-w-3xl p-8 space-y-6">
         <div class="text-center mb-8">
             <h1 class="text-4xl font-bold mb-2">Font Browser</h1>
@@ -145,7 +145,7 @@ let showFiltersOpen = $state(true);
     </div>
 </Story>
 
-<Story name="With Filters Demo" parameters={{ globals: { viewport: 'widgetWide' } }}>
+<Story name="With Filters Demo" parameters={{ viewport: { defaultViewport: 'widgetWide' } }}>
     <div class="w-full max-w-3xl">
         <div class="mb-4 p-4 bg-background-40 rounded-lg">
             <p class="text-sm text-text-muted">
@@ -157,7 +157,7 @@ let showFiltersOpen = $state(true);
     </div>
 </Story>
 
-<Story name="Responsive Behavior" parameters={{ globals: { viewport: 'fullWidth' } }}>
+<Story name="Responsive Behavior" parameters={{ viewport: { defaultViewport: 'fullWidth' } }}>
     <div class="w-full">
         <div class="mb-4 text-center">
             <p class="text-text-muted text-sm">Resize browser to see responsive layout</p>

src/widgets/SampleList/ui/SampleList/SampleList.stories.svelte

@@ -89,7 +89,7 @@ const { Story } = defineMeta({
 });
 </script>
 
-<Story name="Default" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="Default" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="mb-8 text-center">
@@ -101,13 +101,13 @@ const { Story } = defineMeta({
     </div>
 </Story>
 
-<Story name="Full Page" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="Full Page" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <SampleList />
     </div>
 </Story>
 
-<Story name="With Typography Controls" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="With Typography Controls" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="mb-8 text-center">
@@ -119,7 +119,7 @@ const { Story } = defineMeta({
     </div>
 </Story>
 
-<Story name="Custom Text" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="Custom Text" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="mb-8 text-center">
@@ -131,7 +131,7 @@ const { Story } = defineMeta({
     </div>
 </Story>
 
-<Story name="Pagination Info" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="Pagination Info" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="mb-8 text-center">
@@ -143,7 +143,7 @@ const { Story } = defineMeta({
     </div>
 </Story>
 
-<Story name="Responsive Layout" parameters={{ globals: { viewport: 'fullScreen' } }}>
+<Story name="Responsive Layout" parameters={{ viewport: { defaultViewport: 'fullScreen' } }}>
     <div class="min-h-screen bg-background">
         <div class="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
             <div class="mb-8 text-center">