refactor(ComparisonView): unify pretext font string generation with a utility function

src/widgets/ComparisonView/lib/index.ts

@@ -0,0 +1 @@
+export * from './utils/getPretextFontString';

src/widgets/ComparisonView/lib/utils/getPretextFontString.test.ts

@@ -0,0 +1,35 @@
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import { getPretextFontString } from './getPretextFontString';
+
+describe('getPretextFontString', () => {
+    it('correctly formats the font string for pretext', () => {
+        const weight = 400;
+        const sizePx = 16;
+        const fontName = 'Inter';
+        const expected = '400 16px "Inter"';
+
+        expect(getPretextFontString(weight, sizePx, fontName)).toBe(expected);
+    });
+
+    it('works with different weight and size', () => {
+        const weight = 700;
+        const sizePx = 32;
+        const fontName = 'Roboto';
+        const expected = '700 32px "Roboto"';
+
+        expect(getPretextFontString(weight, sizePx, fontName)).toBe(expected);
+    });
+
+    it('handles font names with spaces', () => {
+        const weight = 400;
+        const sizePx = 16;
+        const fontName = 'Open Sans';
+        const expected = '400 16px "Open Sans"';
+
+        expect(getPretextFontString(weight, sizePx, fontName)).toBe(expected);
+    });
+});

src/widgets/ComparisonView/lib/utils/getPretextFontString.ts

@@ -0,0 +1,11 @@
+/**
+ * Formats a font configuration into a string format required by @chenglou/pretext.
+ *
+ * @param weight - Numeric font weight (e.g., 400).
+ * @param sizePx - Font size in pixels.
+ * @param fontName - The font family name.
+ * @returns A formatted font string: `"weight sizepx \"fontName\""`.
+ */
+export function getPretextFontString(weight: number, sizePx: number, fontName: string): string {
+    return `${weight} ${sizePx}px "${fontName}"`;
+}

src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts

@@ -24,6 +24,7 @@ import {
 import { typographySettingsStore } from '$features/SetupFont/model';
 import { createPersistentStore } from '$shared/lib';
 import { untrack } from 'svelte';
+import { getPretextFontString } from '../../lib';
 
 /**
  * Storage schema for comparison state
@@ -205,8 +206,8 @@ export class ComparisonStore {
             return;
         }
 
-        const fontAString = `${weight} ${size}px "${fontAName}"`;
-        const fontBString = `${weight} ${size}px "${fontBName}"`;
+        const fontAString = getPretextFontString(weight, size, fontAName);
+        const fontBString = getPretextFontString(weight, size, fontBName);
 
         // Check if already loaded to avoid UI flash
         const isALoaded = document.fonts.check(fontAString);

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

@@ -22,6 +22,7 @@ import clsx from 'clsx';
 import { getContext } from 'svelte';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
+import { getPretextFontString } from '../../lib';
 import { comparisonStore } from '../../model';
 import Character from '../Character/Character.svelte';
 import Line from '../Line/Line.svelte';
@@ -132,8 +133,8 @@ $effect(() => {
 
     if (container && fontA && fontB) {
         // PRETEXT API strings: "weight sizepx family"
-        const fontAStr = `${_weight} ${_size}px "${fontA.name}"`;
-        const fontBStr = `${_weight} ${_size}px "${fontB.name}"`;
+        const fontAStr = getPretextFontString(_weight, _size, fontA.name);
+        const fontBStr = getPretextFontString(_weight, _size, fontB.name);
 
         // Use offsetWidth to avoid transform scaling issues
         const width = container.offsetWidth;
@@ -165,8 +166,8 @@ $effect(() => {
             containerWidth = width;
             layoutResult = comparisonEngine.layout(
                 comparisonStore.text,
-                `${typography.weight} ${typography.renderedSize}px "${fontA.name}"`,
-                `${typography.weight} ${typography.renderedSize}px "${fontB.name}"`,
+                getPretextFontString(typography.weight, typography.renderedSize, fontA.name),
+                getPretextFontString(typography.weight, typography.renderedSize, fontB.name),
                 width - padding,
                 typography.renderedSize * typography.height,
                 typography.spacing,