feat(fonts): implement Phase 1 - Create Proxy API Client

- Created src/entities/Font/api/proxy/proxyFonts.ts
- Implemented fetchProxyFonts function with full pagination support
- Implemented fetchProxyFontById convenience function
- Added TypeScript interfaces: ProxyFontsParams, ProxyFontsResponse
- Added comprehensive JSDoc documentation
- Updated src/entities/Font/api/index.ts to export proxy API

Phase 1/7: Proxy API Integration for GlyphDiff

src/widgets/ComparisonSlider/ui/ComparisonSlider/FontShifter.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+
+interface Props {
+    text: string;
+    fontName: string;
+    isAnimating: boolean;
+    onAnimationComplete?: () => void;
+}
+
+let { text, fontName, isAnimating, onAnimationComplete }: Props = $props();
+
+// Split text into characters, preserving spaces
+const chars = $derived(text.split('').map(c => c === ' ' ? '\u00A0' : c));
+
+let completedCount = 0;
+
+function handleTransitionEnd() {
+    completedCount++;
+    if (completedCount === chars.length) {
+        onAnimationComplete?.();
+        completedCount = 0;
+    }
+}
+</script>
+
+<div class="relative inline-flex flex-wrap leading-tight">
+    {#each chars as char, i}
+        <span
+            class={cn(
+                'inline-block transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
+                isAnimating ? 'opacity-0 -translate-y-4 rotate-x-90' : 'opacity-100 translate-y-0 rotate-x-0',
+            )}
+            style:font-family={fontName}
+            style:transition-delay="{i * 25}ms"
+            ontransitionend={i === chars.length - 1 ? handleTransitionEnd : null}
+        >
+            {char}
+        </span>
+    {/each}
+</div>
+
+<style>
+/* Necessary for the "Flip" feel */
+div {
+	perspective: 1000px;
+}
+span {
+	transform-style: preserve-3d;
+	backface-visibility: hidden;
+}
+</style>

src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte

@@ -27,9 +27,10 @@ import { type SlideParams } from 'svelte/transition';
 
 interface Props {
     showFilters?: boolean;
+    isOpen?: boolean;
 }
 
-let { showFilters = $bindable(false) }: Props = $props();
+let { showFilters = $bindable(false), isOpen = $bindable(false) }: Props = $props();
 
 onMount(() => {
     /**
@@ -68,6 +69,7 @@ function toggleFilters() {
         class="w-full"
         placeholder="Search fonts by name..."
         bind:value={filterManager.queryValue}
+        bind:isOpen
     >
         <SuggestedFonts />
     </SearchBar>

src/widgets/TypographySettings/ui/TypographyMenu.svelte

@@ -24,7 +24,7 @@ const [send, receive] = crossfade({
 
 {#if displayedFontsStore.hasAnyFonts}
     <div
-        class="w-auto fixed bottom-5 left-1/2 translate-x-[-50%] max-w-max z-10"
+        class="w-auto fixed bottom-5 inset-x-0 max-screen z-10 flex justify-center"
         in:receive={{ key: 'panel' }}
         out:send={{ key: 'panel' }}
     >