fix(SliderArea): temporarily replace pretext measurements with canvas

src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte

@@ -22,7 +22,10 @@ import { Loader } from '$shared/ui';
 import { getContext } from 'svelte';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
-import { getPretextFontString } from '../../lib';
+import {
+    ensureCanvasFonts,
+    getPretextFontString,
+} from '../../lib';
 import { comparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 import Line from '../Line/Line.svelte';
@@ -144,7 +147,10 @@ $effect(() => {
     }
 });
 
-// Layout effect — depends on content, settings AND containerWidth
+// Layout effect — depends on content, settings AND containerWidth.
+// Awaits font loading into the canvas measurement context before invoking
+// the engine; otherwise pretext caches fallback-font widths globally per
+// font string, and the morph boundary drifts from the thumb visually.
 $effect(() => {
     const _text = comparisonStore.text;
     const _weight = typography.weight;
@@ -154,15 +160,22 @@ $effect(() => {
     const _width = containerWidth;
     const _isMobile = isMobile;
 
-    if (container && fontA && fontB && _width > 0) {
-        // PRETEXT API strings: "weight sizepx family"
-        const fontAStr = getPretextFontString(_weight, _size, fontA.name);
-        const fontBStr = getPretextFontString(_weight, _size, fontB.name);
+    if (!container || !fontA || !fontB || _width <= 0) {
+        return;
+    }
 
-        const padding = _isMobile ? 48 : 96;
-        const availableWidth = Math.max(0, _width - padding);
-        const lineHeight = _size * _height;
+    const fontAStr = getPretextFontString(_weight, _size, fontA.name);
+    const fontBStr = getPretextFontString(_weight, _size, fontB.name);
 
+    const padding = _isMobile ? 48 : 96;
+    const availableWidth = Math.max(0, _width - padding);
+    const lineHeight = _size * _height;
+
+    let cancelled = false;
+    ensureCanvasFonts([fontAStr, fontBStr]).then(() => {
+        if (cancelled) {
+            return;
+        }
         layoutResult = comparisonEngine.layout(
             _text,
             fontAStr,
@@ -172,7 +185,11 @@ $effect(() => {
             _spacing,
             _size,
         );
-    }
+    });
+
+    return () => {
+        cancelled = true;
+    };
 });
 
 // Dynamic backgroundSize based on isMobile — can't express this in Tailwind.