Make grid seed truly random

src/utils/jsx/grid.tsx

@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/css';
-import { useId, useMemo } from 'react';
+import { useId, useMemo, useState } from 'react';
 
 const size = 75;
 const cols = 16;
@@ -26,12 +26,7 @@ const path = (points: number[]) =>
         })
         .join(' L ')}`;
 
-const grid = (id: string) => {
-    // Hash the id from React to generate a numeric seed for randomness.
-    const seed =
-        id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) %
-        (2 ** 31 - 1);
-
+const grid = (seed: number) => {
     // Decide which points are active and will be connected to their neighbours.
     const active = Array.from({ length: cols * rows }, (_, point) => {
         const col = point % cols;
@@ -238,12 +233,27 @@ export default ({
     height?: number;
     className?: string;
 }) => {
-    const id = useId();
-    const { connections, requests, vias } = useMemo(() => grid(id), [id]);
+    const id = `grid-${useId()}`;
+
+    const [seed] = useState(() => {
+        // During hydration, reuse the seed already rendered into the DOM.
+        const fromDom =
+            typeof document !== 'undefined'
+                ? document.getElementById(id)?.getAttribute('data-seed')
+                : null;
+        const parsed = Number.parseInt(fromDom ?? '', 10);
+        return Number.isInteger(parsed)
+            ? parsed
+            : Math.floor(Math.random() * 2 ** 31 - 1);
+    });
+
+    const { connections, requests, vias } = useMemo(() => grid(seed), [seed]);
 
     return (
         <svg
+            id={id}
             xmlns="http://www.w3.org/2000/svg"
+            data-seed={seed}
             // The base viewBox would be `0 0 ${cols * size} ${rows * size}`
             // But, we want to center that around whatever width and height are passed in
             viewBox={`${(cols * size - width * size) / 2} ${(rows * size - height * size) / 2} ${width * size} ${height * size}`}

src/utils/jsx/header.tsx

@@ -22,9 +22,10 @@ const styles = {
         height: 100%;
         left: 50%;
         transform: translateX(-50%);
-        top: 0;
-        bottom: 0;
+        top: ${theme.spacing(-2)};
+        bottom: ${theme.spacing(-2)};
         z-index: -1;
+        pointer-events: none;
     `,
     content: css`
         display: flex;

src/utils/jsx/islands/swagger.tsx

@@ -544,7 +544,7 @@ const plugin = (system: System) => ({
                                     system.getComponent('ModelWrapper');
 
                                 return (
-                                    <Wrapper>
+                                    <Wrapper key={fullPath.join('/')}>
                                         <Summary
                                             system={system}
                                             badge="SCHEMA"