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

src/shared/ui/ContentEditable/ContentEditable.stories.svelte

@@ -4,19 +4,104 @@ import ContentEditable from './ContentEditable.svelte';
 
 const { Story } = defineMeta({
     title: 'Shared/ContentEditable',
+    component: ContentEditable,
     tags: ['autodocs'],
     parameters: {
         docs: {
+            description: {
+                component:
+                    'A contenteditable div with custom font and text properties. Allows inline text editing with support for font size, line height, and letter spacing. The text is two-way bindable for form use cases.',
+            },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
     },
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Visible text content (two-way bindable)',
+        },
+        fontSize: {
+            control: { type: 'number', min: 8, max: 200 },
+            description: 'Font size in pixels',
+        },
+        lineHeight: {
+            control: { type: 'number', min: 0.8, max: 3, step: 0.1 },
+            description: 'Line height multiplier',
+        },
+        letterSpacing: {
+            control: { type: 'number', min: -0.5, max: 1, step: 0.05 },
+            description: 'Letter spacing in em units',
+        },
+    },
 });
 </script>
 
 <script lang="ts">
 let value = $state('Here we can type and edit the content. Try it!');
+let smallValue = $state('Small font size for compact text.');
+let largeValue = $state('Large font size for emphasis.');
+let spacedValue = $state('Wide letter spacing.');
+let longValue = $state(
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
+);
 </script>
 
-<Story name="Default">
+<Story
+    name="Default"
+    args={{
+        text: value,
+        fontSize: 48,
+        lineHeight: 1.2,
+        letterSpacing: 0,
+    }}
+>
     <ContentEditable bind:text={value} />
 </Story>
+
+<Story
+    name="Small Font"
+    args={{
+        text: smallValue,
+        fontSize: 16,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    }}
+>
+    <ContentEditable bind:text={smallValue} />
+</Story>
+
+<Story
+    name="Large Font"
+    args={{
+        text: largeValue,
+        fontSize: 72,
+        lineHeight: 1.1,
+        letterSpacing: 0,
+    }}
+>
+    <ContentEditable bind:text={largeValue} />
+</Story>
+
+<Story
+    name="Wide Letter Spacing"
+    args={{
+        text: spacedValue,
+        fontSize: 32,
+        lineHeight: 1.3,
+        letterSpacing: 0.3,
+    }}
+>
+    <ContentEditable bind:text={spacedValue} />
+</Story>
+
+<Story
+    name="Long Text"
+    args={{
+        text: longValue,
+        fontSize: 24,
+        lineHeight: 1.6,
+        letterSpacing: 0,
+    }}
+>
+    <ContentEditable bind:text={longValue} />
+</Story>