fix: iterate pre-computed chars array in Line.svelte to fix unicode grapheme splitting bug

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

@@ -6,15 +6,21 @@
 import type { Snippet } from 'svelte';
 import { comparisonStore } from '../../model';
 
+interface LineChar {
+    char: string;
+    xA: number;
+    widthA: number;
+    xB: number;
+    widthB: number;
+}
+
 interface Props {
     /**
-     * Line text
+     * Pre-computed grapheme array from CharacterComparisonEngine.
+     * Using the engine's chars array (rather than splitting line.text) ensures
+     * correct grapheme-cluster boundaries for emoji and multi-codepoint characters.
      */
-    text: string;
-    /**
-     * DOM element reference
-     */
-    element?: HTMLElement;
+    chars: LineChar[];
     /**
      * Character render snippet
      */
@@ -22,18 +28,15 @@ interface Props {
 }
 const typography = $derived(comparisonStore.typography);
 
-let { text, element = $bindable<HTMLElement>(), character }: Props = $props();
-
-const characters = $derived(text.split(''));
+let { chars, character }: Props = $props();
 </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 chars as c, index}
+        {@render character?.({ char: c.char, index })}
     {/each}
 </div>