fix: keep React 18 (portos-ai-toolkit requires it), fix type resolution

- Revert React 19 / react-leaflet 5 (portos-ai-toolkit@0.8.0 needs ^18.3.1)
- Pin @types/express-serve-static-core@~5.0.7 to avoid breaking ParamsDictionary change
- Move @testing-library/react to client workspace to prevent React duplication
- Revert React 19-specific code changes (JSX namespace, useRef, event types)

Author: atomantic

client/package.json

@@ -13,20 +13,21 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.577.0",
     "portos-ai-toolkit": "^0.8.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hot-toast": "^2.6.0",
-    "react-leaflet": "^5.0.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^7.13.1",
     "socket.io-client": "^4.8.3",
     "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.2",
     "@tailwindcss/vite": "^4.2.1",
     "@types/d3": "^7.4.3",
     "@types/leaflet": "^1.9.21",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^5.1.4",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.7.2",

client/src/components/ai/AiDiscoveryModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { X, Sparkles, Check, Loader2, ChevronDown, ChevronUp, ThumbsDown } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { api } from '../../services/api';
@@ -372,7 +372,7 @@ export function AiDiscoveryModal({ dbId, onClose, onComplete }: AiDiscoveryModal
                             <div className="flex items-center gap-2 flex-wrap">
                               <Link
                                 to={`/person/${dbId}/${candidate.personId}`}
-                                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                                onClick={e => e.stopPropagation()}
                                 className="font-medium text-app-text hover:text-app-accent transition-colors"
                               >
                                 {candidate.name}

client/src/components/ancestry-tree/ConnectionLine.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface ConnectionLineProps {
   x1: number;
   y1: number;
@@ -77,7 +75,7 @@ export function FamilyConnection({
   const targetX = fatherX ?? motherX ?? sourceX;
   const midX = sourceX + (targetX - sourceX) / 2;
 
-  const paths: React.JSX.Element[] = [];
+  const paths: JSX.Element[] = [];
 
   // Draw horizontal line from source to mid
   paths.push(

client/src/components/ancestry-tree/FamilyUnitCard.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect, useState } from 'react';
 import type { AncestryFamilyUnit } from '@fsf/shared';
 import { PersonCard } from './PersonCard';
+import { useRef, useEffect, useState } from 'react';
 
 interface FamilyUnitCardProps {
   unit: AncestryFamilyUnit;
@@ -9,7 +9,7 @@ interface FamilyUnitCardProps {
   onExpandMother?: () => void;
   loadingFather?: boolean;
   loadingMother?: boolean;
-  renderParentUnits: (units: AncestryFamilyUnit[], depth: number) => React.JSX.Element;
+  renderParentUnits: (units: AncestryFamilyUnit[], depth: number) => JSX.Element;
   depth: number;
 }
 

client/src/components/ui/CopyButton.tsx

@@ -11,7 +11,7 @@ interface CopyButtonProps {
 
 export function CopyButton({ text, label = 'Copied!', size = 14, className = '' }: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   useEffect(() => {
     return () => clearTimeout(timeoutRef.current);