chore(deps): migrate web to React 19

packages/web-playground/package.json

@@ -13,12 +13,12 @@
   "dependencies": {
     "@cloakcode/protocol": "workspace:*",
     "@cloakcode/web": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
     "typescript": "^5.6.0",
     "vite": "8.1.4"

packages/web/package.json

@@ -18,17 +18,17 @@
   },
   "dependencies": {
     "qrcode-generator": "^2.0.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@cloakcode/protocol": "workspace:*",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
     "jsdom": "29.1.1",
     "typescript": "^5.6.0",

packages/web/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import type { SessionSummary } from "@cloakcode/protocol";
 import { bridgeUrl, fetchSessions } from "./bridge";
 import { onEnrolmentRequired, onNeedsAuth } from "./auth";

packages/web/src/AuthPrompt.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type JSX } from "react";
 import { submitAuthCode } from "./auth";
 
 /**

packages/web/src/EnrolView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import { beginEnrolment, submitAuthCode, type EnrolProvisioning } from "./auth";
 import { qrSvg } from "./qr";
 

packages/web/src/Markdown.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, type JSX } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 

packages/web/src/SessionView.tsx

@@ -1,4 +1,12 @@
-import { memo, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import {
+  memo,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type JSX,
+} from "react";
 import type {
   Decision,
   PendingBlocker,

packages/web/src/SettingsMenu.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type JSX, type ReactNode } from "react";
 
 /**
  * A single on/off setting: label (+ optional sub-text) on the left, a switch on