src/features/DisplayFont/ui/FontComparer/FontComparer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { appliedFontsManager } from '$entities/Font';
+import { Input } from '$shared/shadcn/ui/input';
+import { ComparisonSlider } from '$shared/ui';
+import { displayedFontsStore } from '../../model';
+import PairSelector from '../PairSelector/PairSelector.svelte';
+
+let displayedText = $state('The quick brown fox jumps over the lazy dog...');
+const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
+const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);
+
+$effect(() => {
+    appliedFontsManager.touch(displayedFontsStore.fonts.map(font => font.id));
+});
+</script>
+
+{#if hasAnyPairs}
+    <div class="flex flex-col gap-4">
+        <div class="flex flex-row gap-4">
+            <Input bind:value={displayedText} />
+            <PairSelector />
+        </div>
+
+        {#if fontA && fontB}
+            <ComparisonSlider fontA={fontA} fontB={fontB} text={displayedText} />
+        {/if}
+    </div>
+{/if}

src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte

@@ -2,11 +2,14 @@
     Component: FontDisplay
     Displays a grid of FontSampler components for each displayed font.
 -->
-<script>
+<script lang="ts">
 import { displayedFontsStore } from '../../model';
+import FontComparer from '../FontComparer/FontComparer.svelte';
 import FontSampler from '../FontSampler/FontSampler.svelte';
 </script>
 
+<FontComparer />
+
 <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
     {#each displayedFontsStore.fonts as font (font.id)}
         <FontSampler font={font} bind:text={displayedFontsStore.text} />