feat(ComparisonSlider): migrate from displayStore to comparisonStore

src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte

@@ -10,23 +10,21 @@
     - Performance optimized using offscreen canvas for measurements and transform-based animations.
 -->
 <script lang="ts">
-import { displayedFontsStore } from '$features/DisplayFont';
 import {
     createCharacterComparison,
     createTypographyControl,
 } from '$shared/lib';
 import type { LineData } from '$shared/lib';
+import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import { Spring } from 'svelte/motion';
 import CharacterSlot from './components/CharacterSlot.svelte';
 import ControlsWrapper from './components/ControlsWrapper.svelte';
 import Labels from './components/Labels.svelte';
 import SliderLine from './components/SliderLine.svelte';
 
-// Displayed text
-let text = $state('The quick brown fox jumps over the lazy dog...');
 // Pair of fonts to compare
-const fontA = $derived(displayedFontsStore.fontA);
-const fontB = $derived(displayedFontsStore.fontB);
+const fontA = $derived(comparisonStore.fontA);
+const fontB = $derived(comparisonStore.fontB);
 
 let container: HTMLElement | undefined = $state();
 let controlsWrapperElement = $state<HTMLDivElement | null>(null);
@@ -59,7 +57,7 @@ const sizeControl = createTypographyControl({
  * Manages line breaking and character state based on fonts and container dimensions.
  */
 const charComparison = createCharacterComparison(
-    () => text,
+    () => comparisonStore.text,
     () => fontA,
     () => fontB,
     () => weightControl.value,
@@ -85,7 +83,10 @@ function handleMove(e: PointerEvent) {
 }
 
 function startDragging(e: PointerEvent) {
-    if (e.target === controlsWrapperElement || controlsWrapperElement?.contains(e.target as Node)) {
+    if (
+        e.target === controlsWrapperElement
+        || controlsWrapperElement?.contains(e.target as Node)
+    ) {
         e.stopPropagation();
         return;
     }
@@ -109,7 +110,7 @@ $effect(() => {
 // Re-run line breaking when container resizes or dependencies change
 $effect(() => {
     // React on text and typography settings changes
-    const _text = text;
+    const _text = comparisonStore.text;
     const _weight = weightControl.value;
     const _size = sizeControl.value;
     const _height = heightControl.value;
@@ -125,9 +126,7 @@ $effect(() => {
 $effect(() => {
     if (typeof window === 'undefined') return;
     const handleResize = () => {
-        if (
-            container && measureCanvas
-        ) {
+        if (container && measureCanvas) {
             charComparison.breakIntoLines(container, measureCanvas);
         }
     };
@@ -215,17 +214,17 @@ $effect(() => {
             <SliderLine {sliderPos} {isDragging} />
         </div>
 
-        <Labels fontA={fontA} fontB={fontB} {sliderPos} />
+        <Labels {fontA} {fontB} {sliderPos} weight={weightControl.value} />
         <!-- Since there're slider controls inside we put them outside the main one -->
         <ControlsWrapper
             bind:wrapper={controlsWrapperElement}
             {sliderPos}
             {isDragging}
-            bind:text={text}
+            bind:text={comparisonStore.text}
             containerWidth={container?.clientWidth}
-            weightControl={weightControl}
-            sizeControl={sizeControl}
-            heightControl={heightControl}
+            {weightControl}
+            {sizeControl}
+            {heightControl}
         />
     </div>
 {/if}