feat(ComparisonView): add redesigned font comparison widget

src/widgets/ComparisonView/ui/Line/Line.svelte

@@ -0,0 +1,39 @@
+<!--
+    Component: Line
+    Renders a line of text in the SliderArea
+-->
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { comparisonStore } from '../../model';
+
+interface Props {
+    /**
+     * Line text
+     */
+    text: string;
+    /**
+     * DOM element reference
+     */
+    element?: HTMLElement;
+    /**
+     * Character render snippet
+     */
+    character: Snippet<[{ char: string; index: number }]>;
+}
+const typography = $derived(comparisonStore.typography);
+
+let { text, element = $bindable<HTMLElement>(), character }: Props = $props();
+
+const characters = $derived(text.split(''));
+</script>
+
+<div
+    bind:this={element}
+    class="relative flex w-full justify-center items-center whitespace-nowrap"
+    style:height="{typography.height}em"
+    style:line-height="{typography.height}em"
+>
+    {#each characters as char, index}
+        {@render character?.({ char, index })}
+    {/each}
+</div>