feat: improve 404 page

package.json

@@ -24,18 +24,17 @@
 		"@dnd-kit/sortable": "8.0.0",
 		"@dnd-kit/utilities": "3.2.2",
 		"@stylexjs/stylex": "0.8.0",
-		"@tanstack/react-router": "1.76.3",
+		"@tanstack/react-router": "1.77.2",
 		"@tanstack/react-store": "0.5.6",
-		"@tanstack/router-devtools": "1.76.3",
-		"@tanstack/router-plugin": "1.76.0",
+		"@tanstack/router-devtools": "1.77.2",
+		"@tanstack/router-plugin": "1.76.4",
 		"@use-gesture/react": "10.3.1",
 		"dayjs": "1.11.13",
 		"lodash-es": "4.17.21",
 		"plausible-tracker": "0.3.9",
-		"react": "19.0.0-rc-1631855f-20241023",
+		"react": "19.0.0-rc-cae764ce-20241025",
 		"react-device-detect": "2.2.3",
-		"react-dom": "19.0.0-rc-1631855f-20241023",
-		"sass": "1.80.4"
+		"react-dom": "19.0.0-rc-cae764ce-20241025"
 	},
 	"devDependencies": {
 		"@babel/core": "7.26.0",
@@ -61,7 +60,7 @@
 		"@vitejs/plugin-react": "4.3.3",
 		"@vitest/coverage-v8": "2.1.3",
 		"@vitest/ui": "2.1.3",
-		"babel-plugin-react-compiler": "0.0.0-experimental-16c1bb9-20241023",
+		"babel-plugin-react-compiler": "0.0.0-experimental-34d04b6-20241024",
 		"cross-env": "7.0.3",
 		"css": "3.0.0",
 		"eslint": "9.13.0",
@@ -74,7 +73,7 @@
 		"prettier": "3.3.3",
 		"prettier-plugin-stylex-key-sort": "1.0.1",
 		"rollup-plugin-workbox": "8.1.0",
-		"tsx": "4.19.1",
+		"tsx": "4.19.2",
 		"typescript": "5.6.3",
 		"typescript-eslint": "8.11.0",
 		"vite": "5.4.10",

scripts/bootstrap/version.ts

@@ -7,7 +7,7 @@ import * as core from "./core";
 /**
  * Internal adrift version.
  */
-export const adriftVersion = "0.11.575";
+export const adriftVersion = "0.11.580";
 
 /**
  * Bumps the adrift `patch` version number using the total commit count.

src/view/routes/__root.tsx

@@ -1,11 +1,15 @@
+import * as stylex from "@stylexjs/stylex";
 import {
 	Outlet,
 	createRootRouteWithContext,
 	useRouterState
 } from "@tanstack/react-router";
 import { lazy } from "react";
 
-import { DotGrid, Icon } from "view/components";
+import { colors } from "lib/styles/colors.stylex";
+import { shadowFn } from "lib/styles/shadows.stylex";
+
+import { DotGrid, FrostedGlass, Icon, Stack } from "view/components";
 
 const TanStackRouterDevtools =
 	env.isDevelopment && env.showDevTools
@@ -46,11 +50,39 @@ function RouterSpinner() {
 
 export function NotFoundRoute() {
 	return (
-		<div className="flex-center" style={{ height: "100vh" }}>
-			<h2 style={{ fontSize: "2rem", textAlign: "center", zIndex: 10 }}>
-				404, Page not found :(
-			</h2>
-			<DotGrid position="fixed" refForMousePosition="window" spacing={50} />
-		</div>
+		<>
+			<Stack center sx={styles.fullScreen}>
+				<FrostedGlass sx={[styles.titleGlass, shadowFn.boxBlock(colors.primary)]}>
+					<h2 {...stylex.props(styles.title)}>404, Page not found :(</h2>
+				</FrostedGlass>
+			</Stack>
+			<DotGrid
+				position="fixed"
+				refForMousePosition="window"
+				reactToWindowResize
+				spacing={40}
+				damping={0.5}
+				returnSpeed={0.18}
+				attractionBase={1.025}
+				maxAttraction={0.8}
+			/>
+		</>
 	);
 }
+
+const styles = stylex.create({
+	fullScreen: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "100vh"
+	},
+	titleGlass: {
+		padding: "2.5rem"
+	},
+	title: {
+		fontSize: "2rem",
+		textAlign: "center",
+		zIndex: 10
+	}
+});