move error component to standalone

src/components/error/error.module.css

@@ -0,0 +1,16 @@
+.error {
+    display: grid;
+    place-content: center;
+
+    background: repeating-linear-gradient(-45deg,
+            color(from var(--fail) xyz x y z / .05),
+            color(from var(--fail) xyz x y z / .05) 10px,
+            color(from var(--fail) xyz x y z / .25) 10px,
+            color(from var(--fail) xyz x y z / .25) 12px,
+            color(from var(--fail) xyz x y z / .05) 12px);
+    color: var(--text-2);
+    border: 1px solid var(--fail);
+    border-radius: var(--radii-m);
+
+    margin: var(--padding-l);
+}

src/components/error/error.tsx

@@ -0,0 +1,16 @@
+import { Component, Show } from "solid-js";
+import css from './error.module.css';
+
+export const ErrorComp: Component<{ error: Error }> = (props) => {
+    return <div class={css.error}>
+        <b>{props.error.message}</b>
+
+        <Show when={props.error.cause}>{
+            cause => <>{cause().description}</>
+        }</Show>
+
+        {props.error.stack}
+
+        <a href="/">Return to start</a>
+    </div>;
+};

src/components/error/index.tsx

@@ -0,0 +1 @@
+export { ErrorComp } from './error';

src/routes/(editor).tsx

@@ -9,8 +9,9 @@ import { HttpHeader } from "@solidjs/start";
 import { FaSolidPalette } from "solid-icons/fa";
 import { LocalePicker } from "~/features/i18n";
 import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme";
-import css from "./editor.module.css";
 import { Dropdown } from "~/components/dropdown";
+import { ErrorComp } from "~/components/error";
+import css from "./editor.module.css";
 
 const event = getRequestEvent();
 
@@ -99,19 +100,5 @@ export default function Editor(props: ParentProps) {
     </MenuProvider>
 }
 
-const ErrorComp: Component<{ error: Error }> = (props) => {
-    return <div class={css.error}>
-        <b>{props.error.message}</b>
-
-        <Show when={props.error.cause}>{
-            cause => <>{cause().description}</>
-        }</Show>
-
-        {props.error.stack}
-
-        <a href="/">Return to start</a>
-    </div>;
-};
-
 let keyCounter = 0;
 const createUniqueId = () => `key-${keyCounter++}`;

src/routes/(editor)/experimental.tsx

@@ -1,8 +1,9 @@
 
-import { ParentProps } from "solid-js";
+import { ErrorBoundary, ParentProps } from "solid-js";
 import { Menu } from "~/features/menu";
 import { createCommand } from "~/features/command";
 import { useNavigate } from "@solidjs/router";
+import { ErrorComp } from "~/components/error";
 
 export default function Experimental(props: ParentProps) {
   const navigate = useNavigate();
@@ -19,6 +20,8 @@ export default function Experimental(props: ParentProps) {
       <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
     </Menu.Root>
 
-    {props.children}
+    <ErrorBoundary fallback={e => <ErrorComp error={e} />}>
+      {props.children}
+    </ErrorBoundary>
   </>;
 }

src/routes/editor.module.css

@@ -108,23 +108,6 @@
     }
 }
 
-.error {
-    display: grid;
-    place-content: center;
-
-    background: repeating-linear-gradient(-45deg,
-            color(from var(--fail) xyz x y z / .05),
-            color(from var(--fail) xyz x y z / .05) 10px,
-            color(from var(--fail) xyz x y z / .25) 10px,
-            color(from var(--fail) xyz x y z / .25) 12px,
-            color(from var(--fail) xyz x y z / .05) 12px);
-    color: var(--text-2);
-    border: 1px solid var(--fail);
-    border-radius: var(--radii-m);
-
-    margin: var(--padding-l);
-}
-
 @keyframes slide-left {
     from {
         translate: 0% 0;