From a900ce4ccae6f4c44a89679ecd1e387a22c54575 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 9 Aug 2026 17:23:47 +0100
Subject: [PATCH 1/3] Make grid seed truly random

---
 src/utils/jsx/grid.tsx | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/utils/jsx/grid.tsx b/src/utils/jsx/grid.tsx
index a71af64..b5772d1 100644
--- a/src/utils/jsx/grid.tsx
+++ b/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}`}

From ae589b2bf8e4482ee3581b43d7e5b5556c543d5c Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 9 Aug 2026 17:29:48 +0100
Subject: [PATCH 2/3] Fix margin misalignment on grid

---
 src/utils/jsx/header.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/jsx/header.tsx b/src/utils/jsx/header.tsx
index 6c45a39..8c9201e 100644
--- a/src/utils/jsx/header.tsx
+++ b/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;

From 3102706ed87fa094e813c22b03992b69d9fb6b1e Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 9 Aug 2026 17:29:59 +0100
Subject: [PATCH 3/3] Fix missing key in swagger models

---
 src/utils/jsx/islands/swagger.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/jsx/islands/swagger.tsx b/src/utils/jsx/islands/swagger.tsx
index 3364704..3ff8464 100644
--- a/src/utils/jsx/islands/swagger.tsx
+++ b/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"