feat(app): add error page

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -109,7 +109,7 @@
     transition:
       d 0.3s ease,
       fill 0.3s ease;
-    fill: var(--color-outline);
+    fill: var(--color-layer-2);
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);

app/src/lib/settings/app-settings.svelte.ts

@@ -6,6 +6,7 @@ const themes = [
   'catppuccin',
   'solarized',
   'high-contrast',
+  'high-contrast-light',
   'nord',
   'dracula'
 ] as const;

app/src/routes/+error.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { page } from '$app/state';
+</script>
+
+<main class="w-screen h-screen flex flex-col items-center justify-center">
+  <div class="outline-1 outline-outline bg-layer-2">
+    <h1 class="p-8 text-3xl">@nodarium/error</h1>
+    <hr>
+    <pre class="p-8">{JSON.stringify(page.error, null, 2)}</pre>
+    <hr>
+    <div class="flex p-4">
+      <button
+        class="bg-layer-2 outline-1 outline-outline p-3 px-6 rounded-sm cursor-pointer"
+        on:click={() => window.location.reload()}
+      >
+        reload
+      </button>
+    </div>
+  </div>
+</main>

packages/ui/src/lib/app.css

@@ -144,11 +144,25 @@ html.theme-high-contrast {
   --color-outline: white;
   --color-layer-0: black;
   --color-layer-1: black;
-  --color-layer-2: #ababab;
+  --color-layer-2: black;
   --color-layer-3: white;
+  --color-active: #00ff00;
+  --color-selected: #ff0000;
   --color-connection: #fff;
 }
 
+html.theme-high-contrast-light {
+  --color-text: black;
+  --color-outline: black;
+  --color-layer-0: white;
+  --color-layer-1: white;
+  --color-layer-2: white;
+  --color-layer-3: black;
+  --color-active: #00ffff;
+  --color-selected: #ff0000;
+  --color-connection: black;
+}
+
 html.theme-nord {
   --color-text: #d8dee9;
   --color-outline: #4c566a;

packages/ui/src/lib/inputs/InputCheckbox.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <label
-  class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 rounded-[5px]"
+  class="relative inline-flex h-5.5 w-5.5 cursor-pointer items-center justify-center bg-layer-2 outline-1 outline-outline rounded-[5px]"
 >
   <input
     type="checkbox"

packages/ui/src/routes/ThemeSelector.svelte

@@ -6,6 +6,7 @@
     'solarized',
     'catppuccin',
     'high-contrast',
+    'high-contrast-light',
     'nord',
     'dracula',
     'custom'