chore(shared/ui): enhance stories with cases, controls and documentation

src/shared/ui/VirtualList/VirtualList.stories.svelte

@@ -7,18 +7,62 @@ const { Story } = defineMeta({
     tags: ['autodocs'],
     parameters: {
         docs: {
+            description: {
+                component:
+                    'High-performance virtualized list for large datasets. Only renders visible items plus an overscan buffer for optimal performance. Supports keyboard navigation (ArrowUp/Down, Home, End) and fixed or dynamic item heights.',
+            },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
     },
+    argTypes: {
+        items: {
+            description: 'Array of items to render',
+        },
+        itemHeight: {
+            control: 'number',
+            description: 'Height of each item in pixels',
+        },
+        overscan: {
+            control: 'number',
+            description: 'Number of extra items to render above and below the visible area',
+        },
+        class: {
+            description: 'CSS class to apply to the root element',
+        },
+        onVisibleItemsChange: {
+            description: 'Callback invoked when the visible items change',
+        },
+    },
 });
 </script>
 
 <script lang="ts">
-const items = Array.from({ length: 10000 }, (_, i) => `${i + 1}) I will not waste chalk.`);
+const smallDataSet = Array.from({ length: 20 }, (_, i) => `${i + 1}) I will not waste chalk.`);
+const largeDataSet = Array.from(
+    { length: 10000 },
+    (_, i) => `${i + 1}) I will not skateboard in the halls.`,
+);
+const emptyDataSet: string[] = [];
 </script>
 
-<Story name="Default">
-    <VirtualList items={items} itemHeight={40}>
+<Story name="Small Dataset">
+    <VirtualList items={smallDataSet} itemHeight={40}>
+        {#snippet children({ item })}
+            <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
+        {/snippet}
+    </VirtualList>
+</Story>
+
+<Story name="Large Dataset">
+    <VirtualList items={largeDataSet} itemHeight={40}>
+        {#snippet children({ item })}
+            <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
+        {/snippet}
+    </VirtualList>
+</Story>
+
+<Story name="Empty Dataset">
+    <VirtualList items={emptyDataSet} itemHeight={40}>
         {#snippet children({ item })}
             <div class="p-2 m-0.5 rounded-sm hover:bg-accent">{item}</div>
         {/snippet}