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

<!--
    Component: Line
    Renders one laid-out line of comparison text as three regions:
    a fontA bulk run (already past the slider), an N-char window of crossfade
    slots straddling the slider, and a fontB bulk run (not yet past).
    Bulk text is rendered as native shaped runs so the browser applies
    kerning and ligatures; per-char DOM is reserved for the window only.
-->
<script lang="ts">
import type { LineRenderModel } from '$entities/Font';
import { typographySettingsStore } from '$features/AdjustTypography';
import { comparisonStore } from '../../model';
import Character from '../Character/Character.svelte';

interface Props {
    /**
     * Per-line render slice from computeLineRenderModel.
     */
    model: LineRenderModel;
}

let { model }: Props = $props();

const typography = $derived(typographySettingsStore);
const fontA = $derived(comparisonStore.fontA);
const fontB = $derived(comparisonStore.fontB);
</script>

<div
    class="relative flex w-full justify-center items-center whitespace-pre"
    style:height="{typography.height * typography.renderedSize}px"
    style:line-height="{typography.height * typography.renderedSize}px"
    style:font-size="{typography.renderedSize}px"
    style:letter-spacing="{typography.spacing}em"
    style:font-weight={typography.weight}
>
    {#if model.leftText}
        <span style:font-family={fontA?.name}>{model.leftText}</span>
    {/if}
    {#each model.windowChars as wc (wc.key)}
        <Character char={wc.char} isPast={wc.isPast} />
    {/each}
    {#if model.rightText}
        <span style:font-family={fontB?.name}>{model.rightText}</span>
    {/if}
</div>