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/routes/Page.svelte

@@ -3,8 +3,15 @@ import { appliedFontsManager } from '$entities/Font';
 import { displayedFontsStore } from '$features/DisplayFont';
 import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
 import { controlManager } from '$features/SetupFont';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
 import { FontSearch } from '$widgets/FontSearch';
+import { cubicOut } from 'svelte/easing';
+import { Spring } from 'svelte/motion';
+import type {
+    SlideParams,
+    TransitionConfig,
+} from 'svelte/transition';
 
 /**
  * Page Component
@@ -13,6 +20,9 @@ import { FontSearch } from '$widgets/FontSearch';
 let searchContainer: HTMLElement;
 
 let isExpanded = $state(false);
+let isOpen = $state(false);
+
+let isEmptyScreen = $derived(!displayedFontsStore.hasAnyFonts && !isExpanded && !isOpen);
 
 $effect(() => {
     appliedFontsManager.touch(
@@ -22,19 +32,63 @@ $effect(() => {
 </script>
 
 <!-- Font List -->
-<div class="p-2 will-change-[height]">
-    <div bind:this={searchContainer}>
-        <FontSearch bind:showFilters={isExpanded} />
+<div class="p-2 h-full flex flex-col gap-3 overflow-hidden">
+    {#key isEmptyScreen}
+        <div
+            class={cn(
+                'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40',
+                'will-change-[flex-grow] transform-gpu',
+                isEmptyScreen
+                    ? 'grow justify-center'
+                    : 'animate-search',
+            )}
+        >
+            <div
+                class={cn(
+                    'transition-transform duration-700 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                )}
+            >
+                <FontSearch bind:showFilters={isExpanded} bind:isOpen />
+            </div>
+        </div>
+    {/key}
+
+    <div class="my-2 mx-10">
+        <ComparisonSlider />
     </div>
 
-    <ComparisonSlider />
-
-    <div class="will-change-tranform transition-transform content">
+    <div class="will-change-tranform transition-transform content my-2">
         <FontDisplay />
     </div>
 </div>
 
 <style>
+@keyframes search {
+        0% {
+            opacity: 1;
+            transform: scale(1);
+            flex-grow: 1;
+            justify-content: center;
+        }
+        15% {
+            opacity: 0.5;
+            transform: scale(0.95);
+        }
+        30% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+            flex-grow: 0;
+            justify-content: flex-start;
+        }
+    }
+
+    .animate-search {
+        animation: search 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+    }
+
 .content {
         /* Tells the browser to skip rendering off-screen content */
         content-visibility: auto;
@@ -44,4 +98,10 @@ $effect(() => {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
 }
+
+.will-change-[height] {
+    will-change: flex-grow, padding;
+    /* Forces GPU acceleration for the layout shift */
+    transform: translateZ(0);
+}
 </style>