fix(web): show settings on first load and hoist DemoProvider globally

Bug 1: On a fresh load with no saved config, RootLayout returned `null`
while a useEffect-driven `router.navigate()` fired, leaving a blank screen
until the user manually refreshed. Move the redirect into the root route's
`beforeLoad` so it happens synchronously during route resolution and the
settings form renders on first paint.

Bug 2: `DemoProvider` was mounted inside `RootLayout` only on the
non-settings branch, so any component reading `useDemo()` outside that
branch would throw "useDemoContext must be used within DemoProvider".
Hoist `<DemoProvider>` to `main.tsx` so the context is available app-wide.

Adds vitest + RTL setup with regression tests for both behaviours.

packages/web/src/main.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { DemoProvider } from "./context/DemoContext";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
 
@@ -32,7 +33,9 @@ if (!root) throw new Error("Missing #root element");
 createRoot(root).render(
 	<StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<RouterProvider router={router} />
+			<DemoProvider>
+				<RouterProvider router={router} />
+			</DemoProvider>
 		</QueryClientProvider>
 	</StrictMode>,
 );