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

<!--
    Component: Line
    Renders a line of text in the SliderArea
-->
<script lang="ts">
import type { Snippet } from 'svelte';
import { comparisonStore } from '../../model';

interface LineChar {
    char: string;
    xA: number;
    widthA: number;
    xB: number;
    widthB: number;
}

interface Props {
    /**
     * 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.
     */
    chars: LineChar[];
    /**
     * Character render snippet
     */
    character: Snippet<[{ char: string; index: number }]>;
}
const typography = $derived(comparisonStore.typography);

let { chars, character }: Props = $props();
</script>

<div
    class="relative flex w-full justify-center items-center whitespace-nowrap"
    style:height="{typography.height}em"
    style:line-height="{typography.height}em"
>
    {#each chars as c, index}
        {@render character?.({ char: c.char, index })}
    {/each}
</div>