From d5f0814efc1b18e7fc64a73630ea3031dc5febdc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 31 May 2026 13:24:14 +0300
Subject: [PATCH] fix(comparison): stabilize line rendering, cut per-tick
 re-renders

Extract findSplitIndex; computeLineRenderModel now takes the split index
as a primitive. Line derives its model from `split`, so the $derived
short-circuits on value equality and skips recomputation on spring ticks
that don't move the split (previously every tick rebuilt the model and
re-rendered the line).

Lay the three regions out as inline boxes on a shared baseline. fontA and
fontB now align on the typographic baseline despite differing metrics,
and an always-present overflow:hidden strut pins the line-box baseline so
the line no longer jumps when a bulk run mounts/unmounts or the last
window char morphs to a font of different ascent.
---
 .../computeLineRenderModel.test.ts            |  67 +++++++++---
 .../computeLineRenderModel.ts                 | 101 +++++++++---------
 src/entities/Font/lib/dualFontLayout/index.ts |   1 +
 .../ui/Character/Character.svelte             |  20 +++-
 .../ComparisonView/ui/Line/Line.svelte        |  89 ++++++++++++---
 .../ui/SliderArea/SliderArea.svelte           |   6 +-
 6 files changed, 198 insertions(+), 86 deletions(-)

diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
index db8206e..e378393 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.test.ts
@@ -4,7 +4,11 @@ import {
     it,
 } from 'vitest';
 import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
-import { computeLineRenderModel } from './computeLineRenderModel';
+import {
+    type LineRenderModel,
+    computeLineRenderModel,
+    findSplitIndex,
+} from './computeLineRenderModel';
 
 /**
  * Build a ComparisonLine fixture with given per-char widths. xA/xB are
@@ -34,10 +38,24 @@ function makeLine(
     return out;
 }
 
+/**
+ * Test helper: compute split + render model in one step, matching the
+ * SliderArea call site shape.
+ */
+function compute(
+    line: ComparisonLine,
+    sliderPos: number,
+    containerWidth: number,
+    windowSize: number,
+): LineRenderModel {
+    const split = findSplitIndex(line, sliderPos, containerWidth);
+    return computeLineRenderModel(line, split, windowSize);
+}
+
 describe('computeLineRenderModel', () => {
     it('returns empty model for an empty line', () => {
         const line = makeLine([]);
-        const model = computeLineRenderModel(line, 50, 500, 5);
+        const model = compute(line, 50, 500, 5);
         expect(model.leftText).toBe('');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('');
@@ -49,7 +67,7 @@ describe('computeLineRenderModel', () => {
             { char: 'B', widthA: 10, widthB: 10 },
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 0, 500, 0);
+        const model = compute(line, 0, 500, 0);
         expect(model.leftText).toBe('');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('ABC');
@@ -61,7 +79,7 @@ describe('computeLineRenderModel', () => {
             { char: 'B', widthA: 10, widthB: 10 },
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 100, 500, 0);
+        const model = compute(line, 100, 500, 0);
         expect(model.leftText).toBe('ABC');
         expect(model.windowChars).toEqual([]);
         expect(model.rightText).toBe('');
@@ -80,7 +98,7 @@ describe('computeLineRenderModel', () => {
             { char: 'C', widthA: 10, widthB: 10 },
         ]);
         // Slider just past B's threshold (50%) but not C's (53.33%).
-        const model = computeLineRenderModel(line, 51, 300, 0);
+        const model = compute(line, 51, 300, 0);
         expect(model.leftText).toBe('AB');
         expect(model.rightText).toBe('C');
     });
@@ -95,7 +113,7 @@ describe('computeLineRenderModel', () => {
         ]);
         // Slider past A and B (~thresholds 43.33%, 46.67%); not past C (50%).
         // split = 2 → halfWindow = 1 → windowStart = 1, windowEnd = 4
-        const model = computeLineRenderModel(line, 48, 300, 3);
+        const model = compute(line, 48, 300, 3);
         expect(model.leftText).toBe('A');
         expect(model.windowChars.map(w => w.char)).toEqual(['B', 'C', 'D']);
         expect(model.rightText).toBe('E');
@@ -109,7 +127,7 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 0, 300, 3);
+        const model = compute(line, 0, 300, 3);
         expect(model.leftText).toBe('');
         expect(model.windowChars.map(w => w.char)).toEqual(['A', 'B', 'C']);
         expect(model.rightText).toBe('DE');
@@ -123,7 +141,7 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 100, 300, 3);
+        const model = compute(line, 100, 300, 3);
         expect(model.leftText).toBe('AB');
         expect(model.windowChars.map(w => w.char)).toEqual(['C', 'D', 'E']);
         expect(model.rightText).toBe('');
@@ -134,7 +152,7 @@ describe('computeLineRenderModel', () => {
             { char: 'A', widthA: 10, widthB: 10 },
             { char: 'B', widthA: 10, widthB: 10 },
         ]);
-        const model = computeLineRenderModel(line, 50, 300, 5);
+        const model = compute(line, 50, 300, 5);
         expect(model.leftText).toBe('');
         expect(model.windowChars.map(w => w.char)).toEqual(['A', 'B']);
         expect(model.rightText).toBe('');
@@ -148,8 +166,8 @@ describe('computeLineRenderModel', () => {
             { char: 'D', widthA: 10, widthB: 10 },
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
-        const a = computeLineRenderModel(line, 40, 300, 3);
-        const b = computeLineRenderModel(line, 60, 300, 3);
+        const a = compute(line, 40, 300, 3);
+        const b = compute(line, 60, 300, 3);
         // Chars that appear in both windows must carry identical keys.
         for (const charA of a.windowChars) {
             const charB = b.windowChars.find(w => w.char === charA.char);
@@ -168,10 +186,35 @@ describe('computeLineRenderModel', () => {
             { char: 'E', widthA: 10, widthB: 10 },
         ]);
         // split = 2 → A,B past; C,D,E not
-        const model = computeLineRenderModel(line, 48, 300, 5);
+        const model = compute(line, 48, 300, 5);
         const expected = new Map([['A', true], ['B', true], ['C', false], ['D', false], ['E', false]]);
         for (const wc of model.windowChars) {
             expect(wc.isPast).toBe(expected.get(wc.char));
         }
     });
 });
+
+describe('findSplitIndex', () => {
+    it('returns 0 for empty line', () => {
+        const line = makeLine([]);
+        expect(findSplitIndex(line, 50, 500)).toBe(0);
+    });
+
+    it('returns 0 when slider is before all char thresholds', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        expect(findSplitIndex(line, 0, 300)).toBe(0);
+    });
+
+    it('returns chars.length when slider is past all char thresholds', () => {
+        const line = makeLine([
+            { char: 'A', widthA: 10, widthB: 10 },
+            { char: 'B', widthA: 10, widthB: 10 },
+            { char: 'C', widthA: 10, widthB: 10 },
+        ]);
+        expect(findSplitIndex(line, 100, 300)).toBe(3);
+    });
+});
diff --git a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
index 4f506ca..c7e0a63 100644
--- a/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
+++ b/src/entities/Font/lib/dualFontLayout/computeLineRenderModel/computeLineRenderModel.ts
@@ -1,7 +1,4 @@
-import type {
-    ComparisonChar,
-    ComparisonLine,
-} from '../DualFontLayout/DualFontLayout';
+import type { ComparisonLine } from '../DualFontLayout/DualFontLayout';
 
 /**
  * Per-line render slice consumed by Line.svelte. The window is centered on the
@@ -35,64 +32,30 @@ export interface LineRenderModel {
     rightText: string;
 }
 
-/**
- * Slices a laid-out line into three regions around the slider's split index:
- * a fontA bulk run, an N-char crossfade window, and a fontB bulk run.
- *
- * Pure and allocation-bounded: two strings plus a `windowSize`-length array per call.
- * Safe to invoke per slider frame; `line.chars` is treated as read-only.
- *
- * @param line           Line from `DualFontLayout.layout()`. Empty `chars` yields an empty model.
- * @param sliderPos      Slider position in percent of `containerWidth`, range 0..100.
- * @param containerWidth Container width in pixels, used to translate `sliderPos` to a threshold x.
- * @param windowSize     Number of chars in the crossfade window. Clamped to `[0, line.chars.length]`.
- *                       At line edges the window is shifted (not shrunk) to keep its size.
- */
-export function computeLineRenderModel(
-    line: ComparisonLine,
-    sliderPos: number,
-    containerWidth: number,
-    windowSize: number,
-): LineRenderModel {
-    const chars = line.chars;
-    const n = chars.length;
-    if (n === 0) {
-        return { leftText: '', windowChars: [], rightText: '' };
-    }
-
-    const split = findSplitIndex(chars, sliderPos, containerWidth);
-
-    const halfWindow = Math.floor(Math.max(0, windowSize) / 2);
-    let windowStart = clamp(split - halfWindow, 0, n);
-    let windowEnd = clamp(windowStart + Math.max(0, windowSize), 0, n);
-    windowStart = Math.max(0, windowEnd - Math.max(0, windowSize));
-
-    const leftText = chars.slice(0, windowStart).map(c => c.char).join('');
-    const rightText = chars.slice(windowEnd).map(c => c.char).join('');
-    const windowChars = chars.slice(windowStart, windowEnd).map((c, idx) => ({
-        key: `${windowStart + idx}-${c.char}`,
-        char: c.char,
-        isPast: (windowStart + idx) < split,
-    }));
-
-    return { leftText, windowChars, rightText };
-}
-
 /**
  * Returns the count of chars whose flip threshold the slider has crossed.
  *
+ * Exposed as a separate step so consumers can pass the resulting primitive
+ * `split` across component boundaries: when split is unchanged tick-to-tick,
+ * downstream `$derived` reads of `computeLineRenderModel(line, split, ...)`
+ * short-circuit on value equality and skip re-rendering.
+ *
  * For each candidate split `i`, the line's hypothetical width at that moment is
  * `prefA[i] + widthA[i] + sufB[i+1]` (past chars in fontA, char `i` flipping, future
  * chars in fontB). The threshold is the x of char `i`'s center in the centered line.
  * Thresholds are monotonically non-decreasing in `i`, so the scan short-circuits on
  * the first miss.
  */
-function findSplitIndex(
-    chars: ComparisonChar[],
+export function findSplitIndex(
+    line: ComparisonLine,
     sliderPos: number,
     containerWidth: number,
 ): number {
+    const chars = line.chars;
     const n = chars.length;
+    if (n === 0) {
+        return 0;
+    }
     const sliderX = (sliderPos / 100) * containerWidth;
 
     const prefA = new Float64Array(n + 1);
@@ -116,6 +79,46 @@ function findSplitIndex(
     return split;
 }
 
+/**
+ * Slices a laid-out line into three regions around a precomputed split index:
+ * a fontA bulk run, an N-char crossfade window, and a fontB bulk run.
+ *
+ * Pure and allocation-bounded: two strings plus a `windowSize`-length array per call.
+ * Takes `split` as a primitive so callers can feed it into a `$derived` and
+ * skip re-evaluation on ticks where the split index is unchanged.
+ *
+ * @param line       Line from `DualFontLayout.layout()`. Empty `chars` yields an empty model.
+ * @param split      Count of chars the slider has passed, in `[0, line.chars.length]`.
+ * @param windowSize Number of chars in the crossfade window. Clamped to `[0, line.chars.length]`.
+ *                   At line edges the window is shifted (not shrunk) to keep its size.
+ */
+export function computeLineRenderModel(
+    line: ComparisonLine,
+    split: number,
+    windowSize: number,
+): LineRenderModel {
+    const chars = line.chars;
+    const n = chars.length;
+    if (n === 0) {
+        return { leftText: '', windowChars: [], rightText: '' };
+    }
+
+    const halfWindow = Math.floor(Math.max(0, windowSize) / 2);
+    let windowStart = clamp(split - halfWindow, 0, n);
+    let windowEnd = clamp(windowStart + Math.max(0, windowSize), 0, n);
+    windowStart = Math.max(0, windowEnd - Math.max(0, windowSize));
+
+    const leftText = chars.slice(0, windowStart).map(c => c.char).join('');
+    const rightText = chars.slice(windowEnd).map(c => c.char).join('');
+    const windowChars = chars.slice(windowStart, windowEnd).map((c, idx) => ({
+        key: `${windowStart + idx}-${c.char}`,
+        char: c.char,
+        isPast: (windowStart + idx) < split,
+    }));
+
+    return { leftText, windowChars, rightText };
+}
+
 /**
  * Clamps `value` into the inclusive range `[lo, hi]`. Assumes `lo <= hi`.
  */
diff --git a/src/entities/Font/lib/dualFontLayout/index.ts b/src/entities/Font/lib/dualFontLayout/index.ts
index 66f0434..bffc09f 100644
--- a/src/entities/Font/lib/dualFontLayout/index.ts
+++ b/src/entities/Font/lib/dualFontLayout/index.ts
@@ -5,5 +5,6 @@ export {
 } from './DualFontLayout/DualFontLayout';
 export {
     computeLineRenderModel,
+    findSplitIndex,
     type LineRenderModel,
 } from './computeLineRenderModel/computeLineRenderModel';
diff --git a/src/widgets/ComparisonView/ui/Character/Character.svelte b/src/widgets/ComparisonView/ui/Character/Character.svelte
index e55c63f..175a5f2 100644
--- a/src/widgets/ComparisonView/ui/Character/Character.svelte
+++ b/src/widgets/ComparisonView/ui/Character/Character.svelte
@@ -1,6 +1,10 @@
 <!--
     Component: Character
-    Renders a single character with morphing animation
+    Renders a single character with morphing animation.
+
+    Sits inline on the parent line's baseline (`vertical-align: baseline`) so it
+    aligns with the bulk text runs in Line.svelte. Sets its own font size since
+    the Line container zeroes font-size to collapse inter-element whitespace.
 -->
 <script lang="ts">
 import { cn } from '$shared/lib';
@@ -15,9 +19,14 @@ interface Props {
      * Past state
      */
     isPast: boolean;
+    /**
+     * Font size in px. Set explicitly because the Line container uses
+     * `font-size: 0` to collapse inter-element whitespace.
+     */
+    fontSize: number;
 }
 
-let { char, isPast }: Props = $props();
+let { char, isPast, fontSize }: Props = $props();
 
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
@@ -25,7 +34,7 @@ const fontB = $derived(comparisonStore.fontB);
 let slot = $state<0 | 1>(0);
 let slotFonts = $state<[string, string]>(['', '']);
 
-const displayChar = $derived(char === ' ' ? ' ' : char);
+const displayChar = $derived(char === ' ' ? ' ' : char);
 const targetFont = $derived(isPast ? fontA?.name ?? '' : fontB?.name ?? '');
 
 $effect(() => {
@@ -39,7 +48,7 @@ $effect(() => {
 </script>
 
 {#if fontA && fontB}
-    <span class="char-wrap">
+    <span class="char-wrap" style:font-size="{fontSize}px">
         {#each [0, 1] as s (s)}
             <span
                 class={cn(
@@ -62,9 +71,10 @@ $effect(() => {
 
 <style>
 .char-wrap {
-    display: inline-block;
+    display: inline-flex;
     position: relative;
     line-height: 1;
+    vertical-align: baseline;
 }
 
 .char-inner {
diff --git a/src/widgets/ComparisonView/ui/Line/Line.svelte b/src/widgets/ComparisonView/ui/Line/Line.svelte
index 69c5e08..612d230 100644
--- a/src/widgets/ComparisonView/ui/Line/Line.svelte
+++ b/src/widgets/ComparisonView/ui/Line/Line.svelte
@@ -1,46 +1,101 @@
 <!--
     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.
+    Renders one laid-out line as three regions: a fontA bulk run (past the
+    slider), an N-char crossfade window straddling it, and a fontB bulk run (not
+    yet past). Bulk runs are native shaped text (kerning, ligatures); only the
+    window uses per-char DOM. `split` is a primitive so the render-model
+    `$derived` skips recomputation on ticks that leave it unchanged.
 -->
 <script lang="ts">
-import type { LineRenderModel } from '$entities/Font';
+import {
+    type ComparisonLine,
+    computeLineRenderModel,
+} 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.
+     * Laid-out line from `DualFontLayout.layout()`. Stable across slider movement.
      */
-    model: LineRenderModel;
+    line: ComparisonLine;
+    /**
+     * Count of chars the slider has passed, from `findSplitIndex`.
+     */
+    split: number;
+    /**
+     * Number of chars in the crossfade window around the split.
+     */
+    windowSize: number;
 }
 
-let { model }: Props = $props();
+let { line, split, windowSize }: Props = $props();
+
+const model = $derived(computeLineRenderModel(line, split, windowSize));
 
 const typography = $derived(typographySettingsStore);
 const fontA = $derived(comparisonStore.fontA);
 const fontB = $derived(comparisonStore.fontB);
+
+const fontSizePx = $derived(typography.renderedSize);
+const lineHeightPx = $derived(typography.height * typography.renderedSize);
+const letterSpacingPx = $derived(typography.spacing * typography.renderedSize);
+
+/**
+ * Class and style are single short bindings so the formatter keeps
+ * `<span ...>{text}</span>` on one line. A wrapped text expression would leak
+ * its indentation into the span content under `white-space: pre`.
+ */
+const BULK_LEFT_CLASS =
+    'inline-block align-baseline leading-none text-swiss-black/75 dark:text-brand/75 transition-colors duration-300';
+const BULK_RIGHT_CLASS =
+    'inline-block align-baseline leading-none text-neutral-950 dark:text-white transition-colors duration-300';
+
+const leftStyle = $derived(`font-family:${fontA?.name ?? ''};font-size:${fontSizePx}px`);
+const rightStyle = $derived(`font-family:${fontB?.name ?? ''};font-size:${fontSizePx}px`);
+
+/**
+ * Stops the whole line from jumping up or down as the slider moves. The browser
+ * pins a line box's baseline to its tallest inline box, so without a fixed
+ * reference the baseline (and every glyph) shifts the moment a bulk run appears
+ * or disappears, or the last window char morphs to a font with a taller ascent.
+ * This invisible strut is always the tallest box — `overflow: hidden` puts its
+ * baseline at its bottom edge — so it owns the line baseline and holds it still.
+ * Its height also sets the text's vertical position (the container is block, so
+ * nothing else centers it).
+ *
+ * Height factors are empirical: the first term centers the text, the `* 1.1`
+ * floor keeps the strut above the fonts' ascent at tight line-heights.
+ */
+const strutHeightPx = $derived(Math.max(lineHeightPx / 2 + fontSizePx * 0.34, fontSizePx * 1.1));
+const strutStyle = $derived(
+    `display:inline-block;width:0;overflow:hidden;vertical-align:baseline;height:${strutHeightPx}px`,
+);
 </script>
 
+<!--
+    Children align on the baseline (`align-baseline`) so fontA/fontB share it
+    despite differing metrics. `font-size: 0` drops inter-element whitespace that
+    would show as gaps under `white-space: pre`; children restore their size.
+    Letter-spacing is px because em would resolve against that zero.
+-->
 <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"
+    class="relative block w-full text-center whitespace-pre"
+    style:height="{lineHeightPx}px"
+    style:line-height="{lineHeightPx}px"
+    style:font-size="0"
+    style:letter-spacing="{letterSpacingPx}px"
     style:font-weight={typography.weight}
 >
+    <span style={strutStyle} aria-hidden="true"></span>
     {#if model.leftText}
-        <span style:font-family={fontA?.name}>{model.leftText}</span>
+        <span class={BULK_LEFT_CLASS} style={leftStyle}>{model.leftText}</span>
     {/if}
     {#each model.windowChars as wc (wc.key)}
-        <Character char={wc.char} isPast={wc.isPast} />
+        <Character char={wc.char} isPast={wc.isPast} fontSize={fontSizePx} />
     {/each}
     {#if model.rightText}
-        <span style:font-family={fontB?.name}>{model.rightText}</span>
+        <span class={BULK_RIGHT_CLASS} style={rightStyle}>{model.rightText}</span>
     {/if}
 </div>
diff --git a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
index 1a513b4..892919c 100644
--- a/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
+++ b/src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
@@ -14,7 +14,7 @@ import {
     MULTIPLIER_L,
     MULTIPLIER_M,
     MULTIPLIER_S,
-    computeLineRenderModel,
+    findSplitIndex,
 } from '$entities/Font';
 import { TypographyMenu } from '$features/AdjustTypography';
 import { typographySettingsStore } from '$features/AdjustTypography/model';
@@ -335,8 +335,8 @@ $effect(() => {
                         "
                     >
                         {#each layoutResult.lines as line, lineIdx (lineIdx)}
-                            {@const model = computeLineRenderModel(line, sliderPos, containerWidth, WINDOW_SIZE)}
-                            <Line {model} />
+                            {@const split = findSplitIndex(line, sliderPos, containerWidth)}
+                            <Line {line} {split} windowSize={WINDOW_SIZE} />
                         {/each}
                     </div>