Update deps: in-range bumps + React 19 and TypeScript 6

- In-range: astro 5.16->5.18.2, tailwindcss 3.4.18->3.4.19,
  tailwind-merge 3.4->3.6
- Majors: react/react-dom 18->19, typescript 5->6,
  add @types/react(-dom) 19. Keep @astrojs/react 4 (already
  supports React 19), Astro 5 and Tailwind 3 unchanged.
- React 19 type fixes: useRef<number|undefined>(undefined) in the
  animation islands (useRef now requires an arg); ReactElement in
  AnimatedTerminal instead of the removed global JSX namespace.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: claude

package-lock.json

@@ -12,15 +12,17 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "astro": "^5.16.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "tailwindcss": "^3.4.18"
   },
   "devDependencies": {
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.3.3"
+    "typescript": "^6.0.3"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef } from "react";
+import { useEffect, useState, useMemo, useRef, type ReactElement } from "react";
 
 type TerminalExample = {
   name: string;
@@ -361,7 +361,7 @@ export default function AnimatedTerminal({ version }: AnimatedTerminalProps) {
   /**
    * Highlight Python syntax in a line of code
    */
-  const highlightPython = (text: string): JSX.Element[] => {
+  const highlightPython = (text: string): ReactElement[] => {
     if (!text.trim()) {
       return [<span key="empty">{text || "\u00A0"}</span>];
     }

src/components/AnimatedTerminal.tsx

@@ -12,7 +12,7 @@ interface Sparkle {
 
 export default function ChristmasSparkles() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationFrameRef = useRef<number>();
+  const animationFrameRef = useRef<number | undefined>(undefined);
   const sparklesRef = useRef<Sparkle[]>([]);
   const isVisibleRef = useRef(true);
 

src/components/ChristmasLights.tsx

@@ -11,7 +11,7 @@ interface Bubble {
 
 export default function OceanWaves() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationFrameRef = useRef<number>();
+  const animationFrameRef = useRef<number | undefined>(undefined);
   const bubblesRef = useRef<Bubble[]>([]);
   const waveOffsetRef = useRef(0);
   const sectionDividersRef = useRef<Array<{ y: number; inverted: boolean }>>([]);

src/components/OceanWaves.tsx

@@ -25,7 +25,7 @@ interface Accumulation {
 
 export default function SnowEffect() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const animationFrameRef = useRef<number>();
+  const animationFrameRef = useRef<number | undefined>(undefined);
   const snowflakesRef = useRef<Snowflake[]>([]);
   const windRef = useRef(0);
   const accumulationsRef = useRef<Map<HTMLElement, Accumulation>>(new Map());

src/components/SnowEffect.tsx

@@ -46,7 +46,7 @@ export default function SunBackground() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const glRef = useRef<WebGLRenderingContext | null>(null);
   const programRef = useRef<WebGLProgram | null>(null);
-  const animationFrameRef = useRef<number>();
+  const animationFrameRef = useRef<number | undefined>(undefined);
   const timeRef = useRef(0);
   const isVisibleRef = useRef(true);
   const [showSun, setShowSun] = useState(false);

src/components/SunBackground.tsx

@@ -4,7 +4,7 @@ export default function VelvetSilkBackground() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const glRef = useRef<WebGLRenderingContext | null>(null);
   const programRef = useRef<WebGLProgram | null>(null);
-  const animationFrameRef = useRef<number>();
+  const animationFrameRef = useRef<number | undefined>(undefined);
   const timeRef = useRef(0);
   const isVisibleRef = useRef(true);
   const [showSilk, setShowSilk] = useState(false);