Phase 3 implementation. Coordinate system implemented. Initial text box tool implemented.

frontend/src/features/editor/pages/PdfDocument.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import * as pdfjsLib from 'pdfjs-dist';
+import { PageStack } from './PageStack';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.mjs',
+  import.meta.url
+).toString();
+
+export function PdfDocument({ documentId }: { documentId: string }) {
+  const [pdfDoc, setPdfDoc] = useState<pdfjsLib.PDFDocumentProxy | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  
+  useEffect(() => {
+    let active = true;
+    const url = `/api/v1/documents/${documentId}/file`;
+    
+    const loadingTask = pdfjsLib.getDocument({ url });
+    
+    loadingTask.promise.then((doc) => {
+      if (active) setPdfDoc(doc);
+    }).catch(err => {
+      console.error('Failed to load PDF', err);
+      if (active) setError(err.message);
+    });
+    
+    return () => {
+      active = false;
+      loadingTask.destroy();
+    };
+  }, [documentId]);
+  
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <div className="text-red-500 bg-red-50 px-4 py-3 rounded-lg border border-red-200">
+          Error loading PDF: {error}
+        </div>
+      </div>
+    );
+  }
+  
+  if (!pdfDoc) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full w-full gap-4">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500"></div>
+        <div className="text-neutral-500 font-medium animate-pulse">Loading document...</div>
+      </div>
+    );
+  }
+  
+  return <PageStack pdfDoc={pdfDoc} />;
+}